vue 富文本编辑器

• 安装

1、npm install @wangeditor/editor --save
2、npm install @wangeditor/editor-for-vue --save

---

• 使用

.vue文件//展示<div style="border: 1px solid #ccc;width: 95%;"><!-- 工具栏 --><Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" /><!-- 编辑器 --><Editor v-if="msg.ProductID" ref="myText" style="height: 500px;overflow: auto;":defaultConfig="editorConfig" v-model="xxxx" @onChange="onChange"@onCreated="onCreated" /></div>//引入
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";//配置editor: null,toolbarConfig: {// toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],excludeKeys: [ /* 隐藏哪些菜单 */"group-video", "insertImage" //上传图片、添加本地图片],//key的获取//1、访问https://www.wangeditor.com/demo/index.html,//2、控制台输入toolbar.getConfig().toolbarKeys//隐藏那个菜单，就找到对应的key，填入即可},editorConfig: {placeholder: "请输入内容...",// autoFocus: false,// 所有的菜单配置，都要在 MENU_CONF 属性下MENU_CONF: {"uploadImage": { //配置上传图片fieldName: 'file',//上传文件名是filemeta: {//上传接口需要额外传递的参数},maxFileSize: 5 * 1024 * 1024, // 1MallowedFileTypes: ['image/*'],// 最多可上传几个文件，默认为 100maxNumberOfFiles: 10,server: 'xxxxx',//后台接口完整地址// 超时时间，默认为 10 秒timeout: 5 * 1000, // 5 秒// 单个文件上传失败onFailed(file, res) {   // TS 语法// onFailed(file, res) {           // JS 语法console.log(`${file.name} 上传失败`, res)},// 上传错误，或者触发 timeout 超时onError(file, err, res) {  // TS 语法// onError(file, err, res) {               // JS 语法console.log(`${file.name} 上传出错`, err, res)},onSuccess(file, res) {  // TS 语法console.log(`${file.name} 上传成功`, res)},customInsert(res, insertFn) {  // TS 语法// customInsert(res, insertFn) {                  // JS 语法// res 即服务端的返回结果console.log(res, '返回')// 从 res 中找到 url alt href ，然后插入图片insertFn(res.Data.url, res.Data.alt, res.Data.href)},}},},//基础方法onCreated(editor) {this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错//点击编辑时，富文本内容回显this.editor.setHtml(xxxx)//v-model绑定的字段    },//输入的文本onChange(editor) {// console.log("onChange", editor.getHtml()); // onChange 时获取编辑器最新内容},