vue+element+Ueditor部署百度富文本框的那些坑

来源:csdn博客 分类: 文章浏览史 发布时间:2020-09-07 20:17:02 最后更新:2020-09-07 浏览:69
转载声明:
本文为摘录自“csdn博客”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2020-09-07 20:17:02

前言:这段时间在用Ueditor富文本编辑器,出现了一些坑,在网上找了很多,都没怎么解决,主要问题是将Ueditor封装成组件后,放在element-ui的el-dialog里时,内容写不进去,原因大概就是组件没有加载完成,就调用了方法,用了this.$nextTick()同样报错,后来用了感觉最笨的方法setTimeout虽然可以解决,但感觉不太好,后来重新封装了一下,大概思路就是等待组件加载完成将组件传过来,然后直接调用方法将内容set进去。

 

1、下载UEditor官网最新的jsp版本的包,下载完成解压之后得到一个ueditor1_4_3_3-utf8-jsp的文件夹,里面包含的内容如下:

使用vue-cli构建项目的话通常都是把外部插件放到static文件夹中,所以目录就会呈现如下:

2、配置Ueditor.config.js主要的还是

···var URL = window.UEDITOR_HOME_URL || '/static/ueditor/';···

其他的配置大可看看官方文档设置一下,常用的默认宽高、默认功能按钮、层级(zIndex,我就遇到过这个坑。。)

  1. 创建components,在main.js引入ueditor的主要文件
    //百度富文本框
    import '../static/ueditor-1.4.3.3/ueditor.config.js'
    import '../static/ueditor-1.4.3.3/ueditor.all.js'
    import '../static/ueditor-1.4.3.3/lang/zh-cn/zh-cn.js'

     

  2. 在components中创建基础的vue组件模板,封装ueditor组件
    <template>
      <div>
        <!--下面通过传递进来的id完成初始化-->
        <script :id="randomId" type="text/plain"></script>
      </div>
    </template>
    
    <script>
    export default {
      name: "UE",
      props: {
        value: {
          default: function() {
            return "";
          }
        },
        //配置可以传递进来
        ueditorConfig: {}
      },
      data() {
        return {
          //每个编辑器生成不同的id,以防止冲突
          randomId: "editor_" + Math.random() * 100000000000000000,
          //编辑器实例
          instance: null,
          ready: false
        };
      },
      watch: {
        value: function(val, oldVal) {
          if (val != null && this.ready) {
            this.instance = UE.getEditor(this.randomId, this.ueditorConfig);
            this.instance.setContent(val);
          }
        }
      },
      //此时--el挂载到实例上去了,可以初始化对应的编辑器了
      mounted() {
        this.initEditor();
      },
    
      beforeDestroy() {
        // 组件销毁的时候,要销毁 UEditor 实例
        if (this.instance !== null && this.instance.destroy) {
          this.instance.destroy();
        }
      },
      methods: {
        initEditor() {
          const _this = this;
          //dom元素已经挂载上去了
          this.$nextTick(() => {
            this.instance = UE.getEditor(this.randomId, this.ueditorConfig);
            // 绑定事件,当 UEditor 初始化完成后,将编辑器实例通过自定义的 ready 事件交出去
            this.instance.addListener("ready", () => {
              this.ready = true;
              this.$emit("ready", this.instance);
            });
          });
        },
        getUEContent() { // 获取内容方法
            return this.instance.getContent()
        },
        setText(con) {
          this.instance = UE.getEditor(this.randomId, this.ueditorConfig);
          this.instance.setContent(con);
        }
      }
    };
    </script>

     

  3. 使用方式: 

<template>
    <div class="box-container">
        <Ueditor @ready="editorReady" ref="ue" :value="defaultMSG" :ueditorConfig="config" style="width:100%;"></Ueditor>
    </div>
</template>
<script>
    import Ueditor from '@/components/Ueditor';
    export default {
        data() {
          return {
            defaultMSG: null,
            form: {
                content: ''
            },
            config: {
                initialFrameHeight: 500
            }
          };
        },
        created() {
            this.getInfo();
        },
        components: {
            Ueditor
        },
        methods: {
            getInfo() {
                getCategoryInfo(this.form.cateId).then(res => {
                    if (res.message =='SUCCESS') {
                        this.form = Object.assign({}, res.data);
                        this.defaultMSG = this.form.content;
                    } else {
                        this.$message({
                          message: res.message,
                          type: 'error',
                          duration: 5 * 1000
                        });
                    }
                })
            },

            editorReady(instance) {
                instance.setContent(this.form.content);
                instance.addListener('contentChange', () => {
                    this.form.content = instance.getContent();
                });
            },

        }
    }
</script>
<style scoped lang="scss">
    
</style>

 

第二个问题:使用watch添加默认值的时候,在watch触发时,ueditor却还没有ready,会导致报错,各种奇葩的错,所以呢, 

添加一个ready属性,在initEditor的时候监听ready事件,在其中赋值 this.ready = true;就可以避免那些乱七八糟的错误了。

第三个问题:在一个没有默认值的时候,需要清空content的内容时,设置defaultMSG为空是不行的,如下效果,要再切换时清空content。

这时候就要用到我们在组件内添加的setText method了,使用的是vue的$refs.组件ref名来获取组件实例,并可以使用methods中的方法

this.$refs.ue.setText(''); //ue是父级在组件上加的 ref="ue"属性

php技术微信