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',//上传文件名是file
              meta: {
                 //上传接口需要额外传递的参数
              },
              maxFileSize: 5 * 1024 * 1024, // 1M
              allowedFileTypes: ['image/*'],
              // 最多可上传几个文件，默认为 100
              maxNumberOfFiles: 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 时获取编辑器最新内容
     },