一、 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 { 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' } // 上传图片时刻自定义设置 header this.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>