一、官网

开源 Web 富文本编辑器，开箱即用，配置简单

二、下载安装

npm install --save @wangeditor/editor-for-vue

三、在vue中使用

3.1、抽离组件editor.vue

在工程的components目录下新建组件editor

<template><div><Toolbar:editor="editor":defaultConfig="toolbarConfig":mode="mode"/><Editorv-model="html":defaultConfig="editorConfig":mode="mode"@onCreated="onCreated"/></div>
</template>
<script>
import { Base64 } from 'js-base64'
import { Loading, Message } from 'element-ui'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'export default {components: { Editor, Toolbar },props: {html: {type: String,default: ''},},data() {let loading = ''return {editor: null,toolbarConfig: {toolbarKeys: [// 一些常用的菜单 key'bold', // 加粗'italic', // 斜体'through', // 删除线'underline', // 下划线'bulletedList', // 无序列表'numberedList', // 有序列表'color', // 文字颜色'insertLink', // 插入链接'fontSize', // 字体大小'lineHeight', // 行高'uploadImage', // 上传图片//'uploadVideo',//上传视频'delIndent', // 缩进'indent', // 增进'deleteImage',//删除图片'divider', // 分割线'insertTable', // 插入表格'justifyCenter', // 居中对齐'justifyJustify', // 两端对齐'justifyLeft', // 左对齐'justifyRight', // 右对齐'undo', // 撤销'redo', // 重做'clearStyle', // 清除格式//'fullScreen' // 全屏]},editorConfig: {placeholder: '请输入内容...' ,MENU_CONF: {uploadImage: {server: '/api/blade-resource/oss/endpoint/put-file',fieldName: 'file',// 单个文件的最大体积限制，默认为 2MmaximgSize: 10 * 1024 * 1024, // 10M// 最多可上传几个文件，默认为 100maxNumberOfimgs: 10,// 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []allowedimgTypes: ['image/*'],// 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。meta: {// token: 'xxx',// otherKey: 'yyy'// img:''},// 将 meta 拼接到 url 参数中，默认 falsemetaWithUrl: false,// 自定义增加 http  headerheaders: {// Accept: 'text/x-json',[website.tokenHeader]: `bearer ${getToken()}`,Authorization: `Basic ${Base64.encode(`${website.clientId}:${website.clientSecret}`)}`},// 跨域是否传递 cookie ，默认为 falsewithCredentials: true,// 超时时间，默认为 10 秒timeout: 10 * 1000, //10 秒// 上传前onBeforeUpload(imgs) {loading = Loading.service({lock: true,text: '图片正在上传中,请耐心等待',spinner: "el-icon-loading"});return imgs;},// 自定义插入图片customInsert(res, insertFn) {console.log('customInsert', res)// 因为自定义插入导致onSuccess与onFailed回调函数不起作用,自己手动处理// 先关闭等待的ElMessageloading.close();if (res.code === 200) {Message({message: '图片上传成功',type: 'success'})} else {Message({message: '图片上传失败，请重新尝试',type: 'error'})}// 从 res 中找到 url alt href ，然后插入图片insertFn(res.data.link);// console.log(res, "res.data")},// 单个文件上传成功之后onSuccess(img, res) {console.log(`${img.name} 上传成功`, res);},// 单个文件上传失败onFailed(img, res) {console.log(`${img.name} 上传失败`, res);},// 上传进度的回调函数onProgress(progress) {console.log('progress', progress);// progress 是 0-100 的数字},// 上传错误，或者触发 timeout 超时onError(img, err, res) {console.log(`${img.name} 上传出错`, err, res);}}}},mode: 'default', // or 'simple'}},created() {if(this.html) {this.html = decodeURIComponent(this.html)}},methods:{onCreated(editor) {this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错},beforeDestroy() {const editor = this.editorif (editor == null) returneditor.destroy() // 组件销毁时，及时销毁编辑器}}
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>

 3.2、使用组件editor.vue

<template>
<div><!--- ... ---><editor v-model="html" /><!--- ... --->
</div>
</template><script>
import Editor from '@/components/editor'
export default {components: { Editor },data() {return {html: ''}}
}
</script>