一，修改框架引入路径
引入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、然后按照官方说明，在模板添加如下代码：
<template>
<div class="">
<script id="container" name="content" type="text/plain">
这里写你的初始化内容
</script>
</div>
</template>
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
