vue使用富文本插件vue elemnt-tiptap和vue-quill-editor

这两天由于项目要实现新闻发布的功能，所以上github和gitee找了一些项目，发现都是用富文本插件编译成html来实现功能。经过尝试和寻找，我使用了vue elemnt-tiptap和vue-quill-editor，发现各有优缺点。还有一些坑，记录一下。

vue elemnt-tiptap

好处是鼠标滑过内容时，可以出现气泡方便使用，上传的图片可以设置大小，并且使用惯了element ui的话，感觉界面比较舒服。缺点是在使用首行缩进功能的时候，发现很费劲，怕凭客户的行为很难玩得转所以还是选择了vue-quill-editor，但是不妨碍我喜欢这个。
示例:

一、安装

npm install --save element-tiptap

二、配置
要先引入ElementUI ，在引入element-tiptap，避免报错。
main.js

import Vue from 'vue';
import ElementUI from 'element-ui'; 
import 'element-ui/lib/theme-chalk/index.css';
import { ElementTiptapPlugin } from 'element-tiptap';
import 'element-tiptap/lib/index.css';
Vue.use(ElementUI);
Vue.use(ElementTiptapPlugin, {
  lang: "zh", // see i18n
});

因为当时构建项目的vue cli版本应该是2.0，所以编译错误，在build文件夹下的webpack.base.conf.js里把babel-loader这里修改一下就可以了。在2.0以上的vuecli没有发现此问题。

{
        test: /\.js$/,
        loader: 'babel-loader',
        include: [
          resolve('src'),
          resolve('test'),
          resolve('node_modules/webpack-dev-server/client'),
          resolve('node_modules/tiptap-extensions/dist'),
          resolve('node_modules/tiptap-utils/dist'),
          resolve('node_modules/tiptap/dist')
        ]
      },

三、使用
extensions指的是所需要的工具，不同的工具对应不同的属性，具体的可以到https://www.npmjs.com/package/element-tiptap文档里去看，可以选择中文查看。
其中上传图片的方法也在代码中，uploadRequest 方法是图片工具类提供的方法之一，其作用就是再上传图片的时候，调用这个方法，将返回的ur作用图片的链接。

<template>
  <div>
    <el-tiptap
      v-model="formInline.contentFileList"
      :extensions="extensions"
    />
  </div>
</template>
 
<script>
import {
  fileUpload
} from "../../api/MochaITOM.js";
import {
  // necessary extensions
  Doc,
  Text,
  Paragraph,
  Heading,
  Bold,
  Underline,
  Italic,
  Strike,
  ListItem,
  BulletList,
  OrderedList,
  Image,
  Blockquote,
  TextAlign,
  Indent,
  Table,
  TableHeader,
  TableCell,
  TableRow,
  TextColor,
  HorizontalRule
} from 'element-tiptap';
 
export default {
  data () {
    return {
      extensions: [
        new Doc(),
        new Text(),
        new Paragraph(),
        new Heading({ level: 5 }),
        new Bold({ bubble: true }), // render command-button in bubble menu.
        new Underline({ bubble: true, menubar: false }), // render command-button in bubble menu but not in menubar.
        new Italic(),
        new Strike(),
        new ListItem(),
        new BulletList(),
        new OrderedList(),
        new Image({
        	//上传图片的方法
           uploadRequest (file) {
            const fd = new FormData()
            fd.append('file', file)
            fd.append('info_id',sessionStorage.getItem('uuid'))
            return fileUpload(fd).then(res=>{
                      return sessionStorage.getItem("api3") + "/fj/"+res.data.path
                    })
          }
        }),
        new Blockquote(),
        new TextAlign(),
        new Indent(),
        new Table(),
        new TableHeader(),
        new TableCell(),
        new TableRow(),
        new HorizontalRule(),
        new TextColor()
      ],
      // 添加信息数据
      formInline: {
        contentFileList:""
      },
    };
  },
},
</script>

填写完毕之后，this.formInline.contentFileList就记录了到插件给你提供的html代码
示例：

四、html的回显。
在这个步骤，我去GitHub扒了一下问题，问题解决方法是：
使用v-html 显示你编辑的html代码。然后加上notice-content和el-tiptap-editor__content，就可以显示了。试了一下el-tiptap-editor__content只有这个貌似也可以。

<div class="notice-content  el-tiptap-editor__content " v-html="message.content"></div>

vue-quill-editor

好处是从其他文本复制过来，格式是一样了，没有太大变化，首行缩进功能也比较友好，只是图片的大小没有vue elemnt-tiptap的那么好调，还有就是上传图片比较之下相对麻烦。
一、安装

npm install vue-quill-editor

二、配置
main.js

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme
Vue.use(VueQuillEditor, /* { default global options } */)     

三、使用（附带上传图片功能）
html

<quill-editor ref="quill"  class="ql-editor-class" v-model="formInline.contentFileList" :options="editorOption"/>
//input是为了上传图片
              <input type="file" @change="change" id="upload" style="display:none;" />

js

import {
  fileUpload
} from "../../api/MochaITOM.js";
export default {
  data () {
    return {
      editorOption: {
        modules: {
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'],
              ['blockquote', 'code-block'],
              [{'header': 1}, {'header': 2}],
              [{'list': 'ordered'}, {'list': 'bullet'}],
              [{'script': 'sub'}, {'script': 'super'}],
              [{'indent': '-1'}, {'indent': '+1'}],
              [{'direction': 'rtl'}],
              [{'size': ['small', false, 'large', 'huge']}],
              [{'header': [1, 2, 3, 4, 5, 6, false]}],
              [{'color': []}, {'background': []}],
              [{'font': []}],
              [{'align': []}],
              ['clean'],
              ['link', 'image', 'video']
            ],  // container为工具栏，此次引入了全部工具栏，也可自行配置
            handlers: {
              image: function(value) {
                if (value) {
                  document.querySelector('#upload').click()  // 劫持原来的图片点击按钮事件
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          }
        }
      },
      // 添加信息数据
      formInline: {
        contentFileList:""
      },
    };
  },
   methods: {
		change(e) {
		      let file = e.target.files[0]
		      const formData = new FormData()
		      formData.append('file', file)
		      formData.append('info_id', this.uuid)
		      fileUpload(formData)
		        .then(res => {
		          let quill = this.$refs.quill.quill
		          if (res.code === 200) {
		            let length = quill.getSelection().index//光标位置
		            // 插入图片  图片地址
		            quill.insertEmbed(length, 'image', sessionStorage.getItem("api3") + "/fj/" +res.data.path)
		            // 调整光标到最后
		            quill.setSelection(length + 1)//光标后移一位
		            document.querySelector('#upload').value=""
		          }
		        })
   		}


	}
},