UEditor
這裏將UEditor做成Vue通用組件。
<div>
<script :id="ueId" class="ueditor-box" type="text/plain" style="width: 100%; height: 260px;"></script>
</div>
import ueditor from 'ueditor'
export default {
data () {
return {
ue: null,
ueId: `J_ueditorBox_${new Date().getTime()}`
}
},
methods: {
initEditor () {
// 創建富文本實例
this.ue = ueditor.getEditor(this.ueId, {
zIndex: 3000,
// 富文本中頂部按鈕
toolbars: [
['fullscreen']
]
})
},
// 富文本內容賦值
setContentValue (data) {
let vm = this
this.ue.ready(function () {
vm.ue.setContent(data)
})
},
// 獲取富文本內容
getContentValue () {
let content = this.ue.getContent()
this.$emit('changeParamExplain', content)
},
// 富文本不可編輯
setNotChange () {
let vm = this
this.ue.ready(function () {
vm.ue.setDisabled('fullscreen')
})
}
}
}
在Vue頁面中,通過引用組件的方式直接將其引用到頁面中。
<ueditor ref="editor"></ueditor>
import ueditor from '@/common/ueditor'
// 頁面初始化時調用富文本初始化方法
mounted () {
// 加載完畢調用
this.$nextTick(() => {
this.$refs.editor.initEditor()
})
}