2020-08-12

使用ueditor的学习笔记

环境：vue + element + ueditor

需求：一个页面多次使用百度编译器 ueditor，主要是存储多行文本html格式

1.首先，在Ueditor的官网下载ueditor，放到我们的static目录中，如下：

2.在main.js中引入我们需要的相关文件（官网有相关文件介绍）：

3.封装成公共文件ue.vue,一般放在components文件下面：

ue.vue代码如下：

<template>
  <div>
    <script :id=id type="text/plain"></script>
  </div>
</template>
<script>
  export default {
    name: 'UE',
    data () {
      return {
        editor: null
      }
    },
    props: {
      defaultMsg: {
        type: String
      },
      config: {
        type: Object
      },
      id: {
        type: String
      },
    },
    mounted() {
      const _this = this;
      this.editor = UE.getEditor(this.id, this.config); // 初始化UE
      this.editor.addListener("ready", function () {
        //延时 lkw20190307 添加, 防止页面加载富文本编辑器来不及赋值/或网络延时加载不上
        setTimeout(function () {
          _this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后，放入内容。
        }, 300)
        
      });
      // console.log("上传这堆错误不用理会，上传接口需自行开发配置");
    },
    methods: {
      getUEContent() { // 获取内容方法
        return this.editor.getContent()
      },
      getUEContentTxt() { // 获取纯文本内容方法
        return this.editor.getContentTxt()
      },
    },
    destroyed() {
      this.editor.destroy();
    }
  }
</script>

这里介绍一下一些参数：

id:如果只使用一次可以写成 id=“editor” ，相应的this.id也是“editor”，如果需要多次使用ueditor必须绑定不同的id

defaultMsg:初始化时编辑器中默认的内容，相当于placeholder
config：官网里面有各种参数配置，比如字数限制，字体，长度等

4.在需要使用ueditor页面引入ueditor

5.使用ueditor

 <UE
   :defaultMsg="defaultMsg4"
   :config="config"
   ref="ue5"
   :id="ue5"
   :placeholder="1"
  ></UE>

注意：id值必须变成string

获取ueditor里面的值：this.result_1 = this.$refs.ue5.getUEContent()   

 注：refs后面的要和ref里面的值相对应,不是和id值对应

放入内容在ueditor中