1：下载富文本编辑器
放到static目录下
全局main.js引入
// 引入 UEditor，注意顺序
import '../static/UEditor/ueditor.config.js'
import '../static/UEditor/ueditor.all.min.js'
import '../static/UEditor/lang/zh-cn/zh-cn.js'
import '../static/UEditor/ueditor.parse.min.js'
2：封装组件（由于不是经常用，注册局部组件）
<template>
<div id="vueUEditor" class="ueditor-box">
<script id="editor" type="text/plain">
</script>
</div>
</template>
<script>
export default {
name: 'vueUEditor',
data () {
return {
editor: null
}
},
props: {
defaultMsg: {
type: String
},
config: {
type: Object
}
},
mounted () {
var that = this;
that.editor = UE.getEditor('editor', that.config);
},
destroyed () {
this.editor.destroy();
},
methods: {
getUEContent () {
return this.editor.getContent();
}
},
}
</script>
<style lang='less' type='text/less'>
#editor {
> div{
100% !important;
> div {
100% !important;
}
}
}
</style>
3：这个要后台配置图片上传路径
static目录UEditor，php，config.json可配置文件上传路径
4：引入调用
import vueUEditor from '../../../components/vueUEditor/vueUEditor'
components: { vueUEditor },
<vueUEditor :config="config" ref="ue"></vueUEditor>
data里面配置
config: {
// initialframeWidth: 800,
// initialframeHeight: 500
},
获取编辑器的内容（html模板）
this.$refs.ue.getUEContent();
设置编辑器的内容（html模板）
var ue = UE.getEditor('editor');
ue.ready(function() { // 准备好再调用setContent
ue.setContent(detail)
});
editor为ID，detail为变量