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-tiptapv-model="formInline.contentFileList":extensions="extensions"/></div>
</template><script>
import {fileUpload
} from "../../api/MochaITOM.js";
import {// necessary extensionsDoc,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;" />

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.quillif (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=""}})}}
},