132 lines
2.7 KiB
Vue
132 lines
2.7 KiB
Vue
<template>
|
||
<div class="editor" :style="styles" ref="editor"></div>
|
||
</template>
|
||
|
||
<script>
|
||
import Editor from 'wangeditor'
|
||
export default {
|
||
name: "Editor",
|
||
props: {
|
||
/* 编辑器的内容 */
|
||
value: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
/* 高度 */
|
||
height: {
|
||
type: Number,
|
||
default: null,
|
||
},
|
||
/* 最小高度 */
|
||
minHeight: {
|
||
type: Number,
|
||
default: null,
|
||
},
|
||
meanArray: {
|
||
// 自定义菜单
|
||
type: Array,
|
||
default: null
|
||
}
|
||
},
|
||
model: {
|
||
prop: 'value',
|
||
event: 'change'
|
||
},
|
||
|
||
computed: {
|
||
styles() {
|
||
let style = {};
|
||
if (this.minHeight) {
|
||
style.minHeight = `${this.minHeight}px`;
|
||
}
|
||
if (this.height) {
|
||
style.height = `${this.height}px`;
|
||
}
|
||
return style;
|
||
},
|
||
},
|
||
watch: {
|
||
value: function (value) {
|
||
if (value !== this.editor.txt.html()) {
|
||
this.editor.txt.html(this.value)
|
||
}
|
||
}
|
||
// value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
|
||
},
|
||
data () {
|
||
return {
|
||
|
||
// 默认有这么多菜单，meanArray有值以meanArray为准
|
||
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
|
||
this.editor = new Editor(this.$refs.editor)
|
||
this.editor.config.uploadImgShowBase64 = true // 使用 base64 保存图片
|
||
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 () {
|
||
const that = this
|
||
that.$nextTick(function () {
|
||
that.init()
|
||
})
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.editor{
|
||
z-index: 1!important;
|
||
white-space: pre-wrap!important;
|
||
line-height: normal !important;
|
||
}
|
||
</style>
|