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{
width: 100% !important;
> div {
width: 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為變量