-
npm 安装
npm i wangeditor --save
-
component新建文件加index.vue
<template>
<div ref="editor"></div>
</template>
<script>
import E from 'wangeditor'
export default {
props: {
value: {
type: String,
default: '',
},
meanArray: {
type: Array,
default: null,
},
},
model: {
prop: 'value',
event: 'change',
},
watch: {
value: function (value) {
if (value !== this.editor.txt.html()) {
this.editor.txt.html(this.value)
}
},
},
data() {
return {
defaultMeanus: [
'head',
'bold',
'fontSize',
'fontName',
'italic',
'underline',
'strikeThrough',
'indent',
'lineHeight',
'foreColor',
'backColor',
'link',
'list',
'justify',
'quote',
'emoticon',
'image',
'video',
'table',
'code',
'splitLine',
'undo',
'redo',
],
editor: '',
}
},
methods: {
init() {
const _this = this
let code = _this.$store.state.uploadConfig
_this.editor = new E(_this.$refs.editor)
_this.editor.config.uploadImgShowBase64 = false
_this.editor.config.uploadImgServer = code.action
_this.editor.config.uploadFileName = 'file'
_this.editor.config.uploadImgHooks = {
before: function (xhr, editor, files) {
xhr.setRequestHeader('Authorization', code.token)
},
success: function (xhr, editor, result) {
},
fail: function (xhr, editor, result) {
},
error: function (xhr, editor) {
},
timeout: function (xhr, editor) {
},
customInsert: function (insertImg, result, editor) {
var url = result.data
insertImg(url)
},
}
_this.setMenus()
_this.editor.config.onchange = (html) => {
_this.$emit('change', html)
}
_this.editor.create()
},
setMenus() {
if (this.meanArray) {
this.editor.config.menus = this.meanArray
} else {
this.editor.config.menus = this.defaultMeanus
}
},
getHtml() {
return this.editor.txt.html()
},
setHtml(txt) {
this.editor.txt.html(txt)
},
},
mounted() {
let that = this
that.$nextTick(function () {
that.init()
})
},
}
</script>
-
在父组件中使用
import wangeditor from '../components/wangEditor/index'
components: {
wangeditor,
},
<wangeditor ref="myTextEditor" v-model="content" ></wangeditor>
之前使用的是vue−quil−editor但是此编辑器,无法展示表格,故使用此编辑器