有关vue引入ueditor遇到的问题

做个记录

引入：

之前项目用的vue-cli3脚本架创建的项目，然后引入ueditor的时候很多资源找不到路径，好多地方报错，后来重新用webpack重构了项目，ueditor的显示问题就自动解决了。

1、下载下来的ue资源包解压放在项目static目录下

2、在main.js里引入

import '../static/ue/ueditor.config.js';
import '../static/ue/ueditor.all.js';
import '../static/ue/lang/zh-cn/zh-cn.js';
import '../static/ue/ueditor.parse.js';

其中all.js和parse.js有压缩版，可以引用压缩版

3、在src/components组件目录下新建一个ue编辑器组件

<template>
  <div>
    <script :id="id" type="text/plain"></script>
  </div>
</template>
<script>
export default {
  name: 'UE',
  data() {
    return {
      editor: null
    }
  },
  props: {
    value: {
      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 () {
      _this.editor.setContent(_this.value); // 确保UE加载完成后，放入内容。
    })
  },
  methods: {
    getUEContent() { // 获取内容
      return this.editor.getContent()
    },
    setUEContent(val) { // 设置编辑器内容
      return this.editor.setContent(val);
    }
    ueSetEnabled() { // 使编辑器不可编辑
      this.editor.setEnabled()
    },
  },
  destroyed() {
    this.editor.destroy();
  }
}

</script>

4、把组件引入到页面里

<template>
    <div>
        <uediter id="uediter" ref="uediter" :value="contentLog" :config="ueditor.config"             
                 style="line-height:22px;">
        </uediter>
    </div>
</template>
<script>
import Uediter from "../../components/ue.vue";
export default {
  data() {
    return {
      ueditor: {
        value: "编辑器默认文字",
        config: {
          toolbars: [
            [
              "source", //源码
              "paragraph", //段落格式
              "fontfamily", //字体
              "fontsize", //字号
              "undo", // 撤销
              "insertorderedlist", //有序列表
              "insertunorderedlist", //无序列表
              "justifyleft", //居左对齐
              "justifyright", //居右对齐
              "justifycenter", //居中对齐
              "simpleupload", //单图上传
              "preview", // 预览
              "fullscreen" //全屏
            ]
          ],
        }
      },
    }
  },
  components:{
    uediter,
  },
}

后面有时间再写我做过的一些改动~