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