vue项目使用umeditor报错Ueditor Cannot set property 'innerHTML' of undefined

最新推荐文章于 2024-05-20 11:11:58 发布

fairyIer

最新推荐文章于 2024-05-20 11:11:58 发布

阅读量6.4k

点赞数

分类专栏： JavaScript vue 文章标签： vue+umeditor ueditor 百度富文本获取内容失败 'innerHTML' of undefined

本文链接：https://blog.csdn.net/fairyier/article/details/80681200

版权

JavaScript 同时被 2 个专栏收录

42 篇文章 1 订阅

订阅专栏

vue

15 篇文章 0 订阅

订阅专栏

网上有很多关于vue项目结合百度富文本使用的例子，比如这篇：https://www.cnblogs.com/dmcl/p/7152711.html

获取编辑器内容方法：

 methods: {
      getUEContent() { // 获取内容方法
        return this.editor.getContent()
      }
    },

因为我还加了watch，旨在页面从加载um（或者ue是基本一样的）开始，实时获取、设置富文本内容：

watch: {
      content: function (newMsg, oldMsg) {
        this.setUMContent(newMsg);
      },
      readonly: function (newMsg, oldMsg) {
        this.toggleDisabled(newMsg);//设置UM是否可编辑
      }
    },

然后就报错了：Ueditor Cannot set property 'innerHTML' of undefined。

原因：在执行setContent()函数的时候，Umeditor还没有初始化好，所以需要等Umeditor初始化好后再调用setContent()函数，用到um.ready()，我的更改为如下就ok了，仅供参考：

     getUMContent() { // 获取内容方法
        let self = this, html = '';
        this.editor.ready(function () {
          html = self.editor.getContent();
        })
        return html;
      },
      setUMContent(msg) {
        let self = this, setResult = null;
        this.editor.ready(function () {
          setResult = self.editor.setContent(msg);
        });
        return setResult;
      },
      toggleDisabled(val){
        let self = this;

        if(this.editor){
          this.editor.ready(function () {
            if(val){
              self.editor.setDisabled('fullscreen');// 设置UE不可编辑
            }else{
              self.editor.setEnabled();
            }
          })
        }
      }

参考文献：https://blog.csdn.net/wangyibo5843/article/details/53397520