Web 富文本编辑器 +Vue Dialog

wangEditor

富文本使用起来还是很方便的

npm 安装 npm i wangeditor --save

import E from 'wangeditor'
const editor = new E('#div1')
editor.create()

正常项目来说 一个富文本已经出来了 然后再配置其他就可以

但是 ! ! ! 接手老项目 难免遇见几个旧雷 记录一下俺的冤种经历~

你可能会遇见这样的报错Uncaught Error in Vue (Component: "unnamed"): mounted hook Error: 无效的节点选择器 或者是 wangEdito hook Error: 错误：初始化编辑器时候未传入任何参数，请查阅文档

网上冲冲浪 会不会是版本问题 也许切换低一点会好 npm i wangeditor@4.6.3

如果可以恭喜发财 无事发生

不sing的话 仔细看这个报错 像不像是元素压根没加载出来

不死心的 输出 this.$nextTick

嗯 还是不行

一个富文本三行代码出来的玩意 我居然现在还没显示 ??? 怒 !

俺仔细研究了一哈 这玩意哪都能出来 就是现在在弹出框里写出不来

就是 element 的 Dialog 对话框

真実はいつもひとつ (柯南推眼镜)

我的富文本在Dialog里没加载出来 哦莫哦莫

我已经可以猜到 又是一个小智障bug了 哭哭

果然 如果你们也遇到这样的bug 先去看一下自己的弹框吧

前人挖坑 后人流泪

留下一些代码 友友们可以参考一下

<el-dialog
    :visible.sync="dialogVisible"
    @opened="eldialogShow"
    @close="$emit('close')"
  >

opened打开的时候 去生成你的富文本

eldialogShow(){
    this.$nextTick(() => {
       this.initEditor();
   });
},

安全起见 我还是选择套在了this.$nextTick里

顺手还写了图片上传

 initEditor(){
        const editor = new E(document.getElementById("content"));
       
        // 配置 server 接口地址
        editor.config.uploadImgServer = this.uploadUrl
      	// 上传图片时，可自定义 filename ，即在使用 formData.append(name, file) 添加图片文件时，自定义第一个参数。
      	// 注意⚠️如果后端有定了字段名 一定记得改这个uploadFileName
        editor.config.uploadFileName = 'xxx'
        // 自定义header头 跟普通的上传附件一样
        editor.config.uploadImgHeaders = {
           'X-Username': getUser().uid,
          'redirectURL': getUploadUrl('uploadPath')
        }
       // 上传图片的不同阶段 
        editor.config.uploadImgHooks={
           before: function (xhr, editor, files) {
        },
        success: function (xhr, editor, result) {
            console.log("上传成功");
        },
        fail: function (xhr, editor, result) {
            console.log("上传失败,原因是" + result);
        },
        error: function (xhr, editor) {
            console.log("上传出错");
        },
        timeout: function (xhr, editor) {
            console.log("上传超时");
        },
        customInsert: function (insertImg, result, editor) {
            // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
            // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
            var url = result.url;
            insertImg(url)
         }
        }
        editor.create();
    },

so 这次bug的原因是 . . .
因为 v-if 弹出框 , 富文本没有渲染
改了弹出框的开关方式就好了 果然很弱智啊

留此博客 希望自己以后能细心点啊丢

后续-- 发现销毁问题
不销毁富文本的话 打开就有好几个富文本了
官方销毁方法是

 mounted() {
    // 创建编辑器
    this.editor = new E(`#demo`)
    this.editor.create()
  },
  beforeDestroy() {
    // 销毁编辑器
    this.editor.destroy()
    this.editor = null
  }

但是我清不掉
写了一个暴力解决办法 v-if="dialogVisible"
果然很暴力 很好用