vue中使用ueditor富文本编辑框

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.效果图