1.官网中,下载源码
2.解压文件到static中,放在ue文件夹中。
3.将ueditor.config.js中的备注部分的* window.UEDITOR_HOME_URL = "/xxxx/xxxx/";去掉备注改成自己window.UEDITOR_HOME_URL = ‘/static/ue/’ ue存放解压后文件的文件夹。
4.封装ueditor.vue文件
<script id="editor" type="text/plain">
export default {
name:'ue',
data () {
return {
editor:null
}
},
props: {
value:'',
config: {}
},
mounted () {
const _this =this
this.editor = window.UE.getEditor('editor', this.config)
this.editor.addListener('ready', function () {
_this.editor.setContent(_this.value)
})
},
methods: {
getUEContent () {
return this.editor.getContent()
}
},
destroyed () {
this.editor.destroy()
}
}
5.在要用到的组件引入,刚才的组件
<div class="con">
<Uediter :value="ueditor.value" :config="ueditor.config" ref="ue">
<input type="button" value="显示编辑器内容(从控制台查看)" @click="returnContent">
import Uediterfrom './ue.vue'
export default {
components: {Uediter},
data () {
return {
dat: {
content:''
},
ueditor: {
value:'编辑器默认文字',
config: {}
}
}
},
methods: {
returnContent () {
this.dat.content =this.$refs.ue.getUEContent()
console.log(this.dat.content)
}
}
}
.con{
margin-top:60px;
}