一个基于 tiptap 和 element-ui 的 「所见即所得」 Vue.js富文本编辑器——Element Tiptap Editor

Element Tiptap Editor易上手，对开发者友好，可扩展性强，设计简洁
官方文档 https://github.com/Leecason/element-tiptap/blob/master/README_ZH.md
通过 NPM
yarn add element-tiptap
或者
npm install --save element-tiptap

效果图

全局安装

import Vue from 'vue';
import ElementUI from 'element-ui';
import { ElementTiptapPlugin } from 'element-tiptap';
// 引入 ElementUI 样式
import 'element-ui/lib/theme-chalk/index.css';
// import element-tiptap 样式
import 'element-tiptap/lib/index.css';

// 安装 ElementUI 插件
Vue.use(ElementUI);
// 安装 element-tiptap 插件
Vue.use(ElementTiptapPlugin, { /* 插件配置项 */ });
// 现在你已经在全局注册了 `el-tiptap` 组件。

局部安装

<template>
  <div>
    <el-tiptap ...><el-tiptap>
  div>
template>

<script>
import {
       ElementTiptap } from 'element-tiptap';

export default {
      
  components: {
      
    'el-tiptap': ElementTiptap,
  },
};
script>

可用的语言:
en(默认)
zh
pl by @FurtakM
ru by @baitkul
de by @Thesicstar
ko by @Hotbrains
es by @koas
zh_tw by @eric0324
fr by @LPABelgium

用法

<template>
  <div>
     <el-tiptap
        lang="zh"
        v-model="content"
        :extensions="extensions"
        height="350"
        placeholder="请输入文章内容"
      >el-tiptap>
template>

<script>
import {
      
  ElementTiptap,
  Doc,
  Text,
  Paragraph,
  Heading,
  Bold,
  Underline,
  Italic,
  Image,
  Strike,
  ListItem,
  BulletList,
  OrderedList,
  TodoItem,
  TodoList,
  HorizontalRule,
  Fullscreen,
  Preview,
  CodeBlock,
  TextColor,
  Table,
  TableHeader,
  TableCell,
  TableRow
} from 'element-tiptap'
import 'element-tiptap/lib/index.css'

export default {
      
  data () {
      
    // 编辑器的 extensions
    // 它们将会按照你声明的顺序被添加到菜单栏和气泡菜单中
    return {
      
       extensions: [
        new Doc(),
        new Text(),
        new Paragraph(),
        new Heading({
       level: 5 }),
        new Bold({
       bubble: true }),
        new Image({
      
          // 默认会把图片生成 base64 字符串和内容存储在一起，如果需要自定义图片上传
          uploadRequest(file) {
      
            // 如果接口要求 Content-Type 是 multipart/form-data，则请求体必须使用 FormData
            const fd = new FormData()
            fd.append('image', file)
            // 第1个 return 是返回 Promise 对象
            // 为什么？因为 axios 本身就是返回 Promise 对象
            return uploadImage(fd).then(res => {
      
              // 这个 return 是返回最后的结果
              return res.data.data.url
            })
          } // 图片的上传方法，返回一个 Promise
        }),
        new Underline({
       bubble: true, menubar: true }), // 下划线
        new Italic(), // 斜体
        new Strike(), // 删除线
        new HorizontalRule(),// 分割线
        new Fullscreen(), // 全屏
        new Preview(), // 预览
        new CodeBlock(), // 代码块
        new TextColor(), // 文本颜色
        new ListItem(),
        new BulletList(), // 无序列表  (必须与 ListItem 一起使用)
        new OrderedList(), // 有序列表  (必须与 ListItem 一起使用)
        new TodoItem(),
        new TodoList(), // 任务列表 (必须与 ListItem 一起使用)
        new Table(),// (与 TableHeader, TableCell, TableRow 一起使用)
        new TableHeader(),
        new TableCell(),
        new TableRow()
      ],
      // 编辑器的内容
      content: `
        
Heading
        
This Editor is awesome!
      `,
    };
  },
},
script>

注意输入的内容会带上p标签，输入内容为空也会有。