vue富文本编辑器的使用

1. 打开vue官网https://cn.vuejs.org/下的资源列表>Awesome Vue
2. ctrl+f搜索Rich Text Editing找Rich Text Editing下的element-tiptap

完整地址：https://github.com/Leecason/element-tiptap
中文版：https://github.com/Leecason/element-tiptap/blob/master/README_ZH.md
在线演示：https://leecason.github.io/element-tiptap
安装依赖：

npm install --save element-tiptap

用法：需要引入的文件

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

使用：

<template>
  <div>
    <el-tiptap
      v-model="content"
      :extensions="extensions"
    />
  </div>
</template>

<script>
import {
ElementTiptap ,//这里引入element-tiptap
  // 需要的 extensions
  Doc,
  Text,
  Paragraph,
  Heading,
  Bold,
  Underline,
  Italic,
  Strike,
  ListItem,
  BulletList,
  OrderedList,
} from 'element-tiptap';

export default {
  data () {
    // 编辑器的 extensions
    // 它们将会按照你声明的顺序被添加到菜单栏和气泡菜单中
    return {
      extensions: [
        new Doc(),
        new Text(),
        new Paragraph(),
        new Heading({ level: 5 }),
        new Bold({ bubble: true }), // 在气泡菜单中渲染菜单按钮
        new Underline({ bubble: true, menubar: false }), // 在气泡菜单而不在菜单栏中渲染菜单按钮
        new Italic(),
        new Strike(),
        new ListItem(),
        new BulletList(),
        new OrderedList(),
      ],
      // 编辑器的内容
      content: `
        <h1>默认插入的文本内容</h1>
        <p>这里的content可以绑定到自己要上传路径</p>
      `,
    };
  },
},
</script>

上面使用时要加入lang="en"不然可能会报错
TypeError: Cannot read property ‘lang’ of undefined

需要更多功能可以参考官网扩展 extensions
比如可以添加插入图片、添加背景色…