一、 wangEditor
基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费
http://www.wangeditor.com/index.html

1 、安装

npm install wangeditor

2、封装公用组件 editor.vue

<template><div class="editor"><!-- 菜单区 --><div ref="toolbar" class="toolbar"></div><!--编辑内容区--><div ref="editor" class="text"><!--可使用 min-height 实现编辑区域自动增加高度--></div></div>
</template><script>
import Editor from 'wangeditor'
import { uploadfileUrl, imgUrl } from "@/apis/apis";   // uploadfileUrl 上传图片的地址  imgUrl  加载图片时的地址（后端返回的一般是图片的路径，需要加上图片的地址）
export default {name: 'HelloWorld',props: {value: {type: String,default: ''},isClear: {type: Boolean,default: false}},data() {return {editor: null,    info_: null,uploadfileUrl,    // 上传图片时的地址 imgUrl,          // 加载图片时的地址 （拼接后台返回的图片路径）}},mounted() {this.setEditor();// console.log(this.editor.txt.html())  // this.editor.txt.html() 为编辑区内容this.editor.txt.html(this.value)},methods: {// 设置编辑器setEditor() {this.editor = new Editor(this.$refs.toolbar, this.$refs.editor);// 配置onchange函数之后，用户操作（鼠标点击、键盘打字等）导致的内容变化之后，会自动触发onchange函数执行。this.editor.customConfig.onchange = (html) => {  // html 即变化之后的内容this.info_ = html this.$emit('change', this.info_) // 将内容同步到父组件中}// 配置菜单(默认的菜单)this.editor.customConfig.menus = ['head', // 标题'bold', // 粗体'fontSize', // 字号'fontName', // 字体'italic', // 斜体'underline', // 下划线'strikeThrough', // 删除线'foreColor', // 文字颜色'backColor', // 背景颜色'link', // 插入链接'list', // 列表'justify', // 对齐方式'quote', // 引用'emoticon', // 表情'image', // 插入图片'table', // 表格'video', // 插入视频'code', // 插入代码（可以注释）'undo', // 撤销'redo', // 重复'fullscreen' // 全屏]// 上传图片 & 配置// 是否使用 base64 保存图片this.editor.customConfig.uploadImgShowBase64 = false  //  true -> 使用 base64 保存图片 false -> 不使用// 配置服务器端地址this.editor.customConfig.uploadImgServer = this.uploadfileUrl// 限制图片大小this.editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024   // 将图片大小限制为 2M// 限制一次最多能传几张图片 this.editor.customConfig.uploadImgMaxLength = 10  // 限制一次最多上传 10 张图片// 自定义上传参数 上传图片时可自定义传递一些参数，例如传递验证的token等。this.editor.customConfig.uploadImgParams = { token: '123' }// 上传图片时刻自定义设置 headerthis.editor.customConfig.uploadImgHeaders = {// 例如：'Accept': 'text/x-json'}// 自定义 fileName（上传文件的参数名）this.editor.customConfig.uploadFileName = 'fileName'// 自定义 timeout 时间 （设置超时时间）this.editor.customConfig.uploadImgTimeout = 3 * 60 * 1000   // 将 timeout 时间改为 3 分钟// 可使用监听函数在上传图片的不同阶段做相应处理// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件this.editor.customConfig.uploadImgHooks = {before: function (xhr, editor, files) {// 图片上传之前触发},success: function (xhr, editor, result) {// 图片上传并返回结果，图片插入成功之后触发},fail: function (xhr, editor, result) {// 图片上传并返回结果，但图片插入错误时触发},error: function (xhr, editor) {// 图片上传出错时触发},timeout: function (xhr, editor) {// 图片上传超时时触发},// 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置// （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）customInsert: function (insertImg, result, editor) {// 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）// insertImg 是插入图片的函数，editor 是编辑器对象，result 为上传图片成功的时候 服务器端返回的结果// 举例：假如上传图片成功后，服务器端返回的是data:[{url:'图片路径'} ] 这种格式，即可这样插入图片：let url = this.imgUrl + result.data.url  // 图片地址 + 返回的图片的路径insertImg(url)// result 必须是一个 JSON 格式字符串！！！否则报错}}// 创建富文本编辑器this.editor.create();}},watch: {isClear(val) {// 触发清除文本域内容console.log(val)if (val) {this.editor.txt.clear()this.info_ = null}},value: function (value) {if (value !== this.editor.txt.html()) {this.editor.txt.html(this.value)}}//value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值},
}
</script><style lang="css">
.editor {width: 80%;margin: 20px auto;
}
.toolbar {border: 1px solid #ccc;
}
.text {border: 1px solid #ccc;height: 400px;
}
</style>

3、使用：

<template><div><editor v-model="content" :isClear="isClear" @change="change"></editor></div>
</template><script>
import Editor from "@/components/editor";export default {data() {return {content: '',isClear: false,}},components: { Editor },methods: {change(val) {//   console.log(val)}}
}
</script>