Commit f4672d46 by j.yao.SUSE Committed by elunez

增加v-model, 优化双向绑定事件 (#44)

使用 : 
1. 导入组件
2.  <Editor v-model="value" />
parent 0fe86e60
<template>
<div>
<div ref="editor" style="text-align:left;margin: 5px">
<h3 style="text-align: center;">欢迎使用 wangEditor 富文本编辑器!</h3>
<ul>
<li>富文本中图片上传使用的是sm.ms图床,支持上传到七牛云:<a style="color: #42b983" target="_blank" href="https://sm.ms/">sm.ms</a></li>
<li>更多帮助请查看官方文档:<a style="color: #42b983" target="_blank" href="https://www.kancloud.cn/wangfupeng/wangeditor3/332599">wangEditor</a></li>
</ul>
<div v-html="editorContent"/>
</div>
<div style="margin: 12px 5px;font-size: 16px;font-weight: bold;color: #696969">HTML渲染如下:</div>
<div class="editor-content" v-html="editorContent"/>
......@@ -13,17 +9,28 @@
</template>
<script>
import { debounce } from 'lodash'
import { mapGetters } from 'vuex'
import E from 'wangeditor'
import { getToken } from '@/utils/auth'
export default {
name: 'Editor',
model: {
prop: 'value',
event: 'editorChange'
},
props: {
value: {
type: String,
default: () => ''
}
},
data() {
return {
headers: {
'Authorization': 'Bearer ' + getToken()
},
editorContent:
editorContent: this.value ||
`<h3 style="text-align: center;">欢迎使用 wangEditor 富文本编辑器!</h3>
<ul>
<li>富文本中图片上传使用的是sm.ms图床,支持上传到七牛云:<a style="color: #42b983" target="_blank" href="https://sm.ms/">sm.ms</a></li>
......@@ -44,9 +51,10 @@ export default {
// 自定义文件名,不可修改,修改后会上传失败
editor.customConfig.uploadFileName = 'file'
editor.customConfig.uploadImgServer = this.imagesUploadApi // 上传图片到服务器
editor.customConfig.onchange = (html) => {
editor.customConfig.onblur = debounce(html => {
this.$emit('editorChange', html)
this.editorContent = html
}
}, 1000)
editor.create()
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment