一套利，修改框架引入路徑
引入U(xiǎn)Editor的相關(guān)文件推励，放在項(xiàng)目文件里，下面以我的項(xiàng)目目錄為例肉迫，如果你的項(xiàng)目目錄和我的不一樣验辞，也沒(méi)關(guān)系，我會(huì)說(shuō)在哪里改路徑喊衫，我的路徑僅供參考跌造。
1、把UEditor所有的相關(guān)文件放在ueditor（自己定義的）目錄下了。
image.png
2壳贪、然后打開(kāi)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、不一定按照我目錄新建文件违施，只做示意互纯，根據(jù)自己的項(xiàng)目來(lái)。
image.png
2磕蒲、然后按照官方說(shuō)明伟姐，在模板添加如下代碼：
<template>
<div class="">
<script id="container" name="content" type="text/plain">
這里寫(xiě)你的初始化內(nèi)容
</script>
</div>
</template>
3、然后引入U(xiǎn)editor相關(guān)js文件
//再三強(qiáng)調(diào)亿卤，注意引入路徑
import '../../assets/ueditor/ueditor.config'
import '../../assets/ueditor/ueditor.all.min'
import '../../assets/ueditor/lang/zh-cn/zh-cn'
4愤兵、接下來(lái)初始化Ueditor
export default {
props: {
//配置可以傳遞進(jìn)來(lái)
ueditorConfig: {}
},
data () {
return {
//編輯器實(shí)例
instance: null,
};
},
//此時(shí)--el掛載到實(shí)例上去了,可以初始化對(duì)應(yīng)的編輯器了
mounted () {
this.initEditor()
},
beforeDestroy () {
// 組件銷毀的時(shí)候，要銷毀 UEditor 實(shí)例
if (this.instance !== null && this.instance.destroy) {
this.instance.destroy();
}
},
methods: {
initEditor () {
//dom元素已經(jīng)掛載上去了
this.$nextTick(() => {
this.instance = UE.getEditor('container', this.ueditorConfig);
// 綁定事件排吴，當(dāng) UEditor 初始化完成后秆乳，將編輯器實(shí)例通過(guò)自定義的 ready 事件交出去
this.instance.addListener('ready', () => {
this.$emit('ready', this.instance);
});
});
}
}
}
再然后在相關(guān)文件中引用，
引入ueditor模板
注冊(cè)為模板：
components:{
UEditor
},
在需要的地方引入模板
引入模板
@read為Ueditor模板e(cuò)mit的事件钻哩，監(jiān)聽(tīng)read事件執(zhí)行editorReady方法屹堰，
editorReady方法入下
methods: {
editorReady (instance) {
instance.setContent('');
instance.addListener('contentChange', () => {
this.content = instance.getContent();
});
},
}
到這里就能正常使用了，后臺(tái)相關(guān)功能需要配置街氢，本人不懂后臺(tái)扯键，不做相關(guān)說(shuō)明。
參考目錄
百度UEditor官網(wǎng)
vue2.0
