115 lines
2.4 KiB
Vue
115 lines
2.4 KiB
Vue
<template>
|
|
<div class="editor">
|
|
<div id="e" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Vue from 'vue'
|
|
import E from 'wangeditor'
|
|
export default {
|
|
name: 'Editor',
|
|
model: {
|
|
prop: 'desc',
|
|
event: 'change'
|
|
},
|
|
props: {
|
|
desc: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
// 业务中我们经常会有添加操作和编辑操作，添加操作时，我们需清除上一操作留下的缓存
|
|
isClear: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
isdisable: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
content: '',
|
|
editor: '',
|
|
info_: null
|
|
}
|
|
},
|
|
watch: {
|
|
isClear(val) {
|
|
console.log(val)
|
|
if (val) {
|
|
this.editor.txt.clear()
|
|
// this.info_=null
|
|
}
|
|
},
|
|
isdisable(val) {
|
|
console.log(val)
|
|
if (val) {
|
|
this.editor.disable()
|
|
}
|
|
},
|
|
desc(value) {
|
|
// console.log('desc', value)
|
|
if (value != this.editor.txt.html()) {
|
|
this.editor.txt.html(this.desc)
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initE()
|
|
this.monitoring() // 注册监听事件
|
|
},
|
|
methods: {
|
|
initE() {
|
|
this.editor = new E('#e')
|
|
console.log(this.editor)
|
|
this.editor.config.height = 520
|
|
this.editor.config.onchange = (html) => {
|
|
this.info_ = html // 绑定当前逐渐地值
|
|
this.$emit('change', this.info_) // 将内容同步到父组件中
|
|
}
|
|
this.editor.config.menus = [
|
|
'head', // 标题
|
|
'bold', // 粗体
|
|
'fontSize', // 字号
|
|
'fontName', // 字体
|
|
'lineHeight', // 行高
|
|
'italic', // 斜体
|
|
'underline', // 下划线
|
|
'strikeThrough', // 删除线
|
|
'foreColor', // 文字颜色
|
|
'backColor', // 背景颜色
|
|
// 'link', // 插入链接
|
|
'list', // 列表
|
|
'justify', // 对齐方式
|
|
// 'quote', // 引用
|
|
// 'emoticon', // 表情
|
|
// 'image', // 插入图片
|
|
'table', // 表格
|
|
// 'code', // 插入代码
|
|
'undo', // 撤销
|
|
'redo' // 重复
|
|
]
|
|
this.editor.create()
|
|
},
|
|
monitoring() { // 监听事件
|
|
this.$on('disable', (res) => {
|
|
this.editor.disable()
|
|
})
|
|
this.$on('clear', (res) => {
|
|
console.log('clear')
|
|
this.editor.txt.clear()
|
|
})
|
|
this.$on('getText', (res) => {
|
|
this.$emit('getTextVal', this.editor.txt.html())
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style>
|