在vue项目里使用UEditor富文本编辑器

一，修改框架引入路径

引入UEditor的相关文件，放在项目文件里，下面以我的项目目录为例，如果你的项目目录和我的不一样，也没关系，我会说在哪里改路径，我的路径仅供参考。

1、把UEditor所有的相关文件放在ueditor（自己定义的）目录下了。

image.png

2、然后打开ueditor目录下的ueditor.config.js

image.png

修改路径：

var URL = window.UEDITOR_HOME_URL || getUEBasePath();
//改为下面的路径
var URL = window.UEDITOR_HOME_URL || '/src/assets/ueditor/';

二、新建uedtior.vue文件

1、不一定按照我目录新建文件，只做示意，根据自己的项目来。

image.png

2、然后按照官方说明，在模板添加如下代码：

3、然后引入Ueditor相关js文件

//再三强调，注意引入路径
import '../../assets/ueditor/ueditor.config'
import '../../assets/ueditor/ueditor.all.min'
import '../../assets/ueditor/lang/zh-cn/zh-cn'

4、接下来初始化Ueditor

export default {
        props: {
            //配置可以传递进来
            ueditorConfig: {}
        },
        data () {
            return {
                //编辑器实例
                instance: null,
            };
        },
        //此时--el挂载到实例上去了,可以初始化对应的编辑器了
        mounted () {
            this.initEditor()
        },
        beforeDestroy () {
            // 组件销毁的时候，要销毁 UEditor 实例
            if (this.instance !== null && this.instance.destroy) {
                this.instance.destroy();
            }
        },
        methods: {
            initEditor () {
                //dom元素已经挂载上去了
                this.$nextTick(() => {
                    this.instance = UE.getEditor('container', this.ueditorConfig);
                    // 绑定事件，当 UEditor 初始化完成后，将编辑器实例通过自定义的 ready 事件交出去
                    this.instance.addListener('ready', () => {
                        this.$emit('ready', this.instance);
                    });
                });
            }
        }
    }

再然后在相关文件中引用，

引入ueditor模板

注册为模板：

components:{
    UEditor
},

在需要的地方引入模板

引入模板

@read为Ueditor模板emit的事件，监听read事件执行editorReady方法，
editorReady方法入下

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

到这里就能正常使用了，后台相关功能需要配置，本人不懂后台，不做相关说明。
参考目录
百度UEditor官网
vue2.0