关于项目中的富文本编辑器的使用方法

        在项目中我么使用的富文本编辑器 一般都是来自第三方的，基本不会去自己写。除非有特别高端的，需要精细化定制的项目。

        在项目中我们一般都是直接去找第三方的编辑器去使用或者修改

        

在这里给大家推荐几个比较热门的编辑器

• UEditor （百度编辑器 功能丰富）
• CKEditor （国外的一个比较稳定的编辑器）

另外我们还可以使用Vue官方推荐的一些富文本编辑器

 Vue官方推荐的这些 都是Vue官方认为比较适合在Vue中使用的

我们今天给大家演示使用一个Vue官方推荐的富文本编辑器element-tiptap 注意该编辑器只能在vue项目中使用

 element-tiptap 是基于tiptap 使用了element-ui包装了一次 使风格更偏向于element-ui

首先我们 下载安装

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>

不管是全局安装还是局部安装 都需要引入样式

用法

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

<script>
import {
  // 需要的 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>Heading</h1>
        <p>This Editor is awesome!</p>
      `,
    };
  },
},
</script>