Files
cha0yang/src/components/MethodsWay.vue
2020-05-07 18:59:46 +08:00

75 lines
1.7 KiB
Vue

<template>
<div ref="methodsWay" id="methodsWay"></div>
</template>
<script>
import E from 'wangeditor'
var phoneEditor, _this
export default {
components: {},
props: {
methodsWayVal: {
type: String,
required: false
},
writeable:{
type:Boolean,
value:true
}
},
data () {
return {}
},
created () {},
mounted () {
_this = this
_this.methodsWayVal=_this.methodsWayVal
phoneEditor = new E(this.$refs.methodsWay)
phoneEditor.customConfig.pasteFilterStyle = false
phoneEditor.customConfig.onchange = html => {
_this.$emit('methodsWay', html)
}
phoneEditor.customConfig.menus = [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
// 'link', // 插入链接
// 'list', // 列表
'justify', // 对齐方式
// 'quote', // 引用
// 'emoticon', // 表情
// 'image', // 插入图片
'table', // 表格
// 'video', // 插入视频
// 'code', // 插入代码
'undo', // 撤销
'redo' // 重复
]
phoneEditor.create()
phoneEditor.txt.html(_this.methodsWayVal)
phoneEditor.$textElem.attr('contenteditable', this.writeable)
},
methods: {},
computed: {},
watch: {
methodsWayVal (val) {
phoneEditor.txt.html(val)
}
}
}
</script>
<style lang="scss" scoped>
#methodsWay {
width: 100%;
height: 250px;
font-family:'宋体' !important;
}
</style>