1.把下載的Ueditor資源，放入靜態資源static中。
修改ueditor.config.js中的window.UEDITOR_HOME_URL配置，如下圖：
2.在main.js中引入以下文件：
import '../static/UE/ueditor.config.js'
import '../static/UE/ueditor.all.min.js'
import '../static/UE/lang/zh-cn/zh-cn.js'
import '../static/UE/ueditor.parse.min.js'
3.創建組件（ue.vue）：
<template>
<div>
<script id="ueid" type="text/plain"></script>
</div>
</template>
<script>
export default {
name: 'UE',
data () {
return {
editor: null
}
},
props: {
defaultMsg: {
type: String
},
config: {
type: Object
},
},
mounted() {
const _this = this;
this.editor = UE.getEditor("ueid", this.config); // 初始化UE
this.editor.addListener("ready", function () {
_this.editor.setContent(_this.defaultMsg); // 確保UE加載完成后，放入內容。
});
},
methods: {
getUEContent() { // 獲取內容方法
return this.editor.getContent()
}
},
destroyed() {
this.editor.destroy();
}
}
</script>
在src目錄下新建一個ue文件，把組件ue.vue放到ue文件夾中。
4.引入組件：
<template>
<section>
<UE :defaultMsg='uetest' :config=config ref="ue"></UE>
</section>
</template>
<script>
import UE from '@/ue/ue.vue'; //引入組件
export default {
components: {UE},
data() {
return {
uetest:'試一下！！！！',
config: {
initialFrameWidth: null,
initialFrameHeight: 350
}
}
}
}
</script>
5.效果圖
