编辑数据:
1、首先我们需要定义一个方法transContent转换v-model中的值,替换当前编辑器返回的数据(带有html标签:<p>、<br/>等标签)
<Editor :id="tinymceId" v-model="myValue" :init="init" :disabled="disabled" />
<script>
import tinymce from 'tinymce'
import 'tinymce/themes/silver'
// 引入tinymce-vue
import Editor from '@tinymce/tinymce-vue'
...
//使用组件形式引用
watch: {
// 监听内容变化
value(newValue) {
this.myValue = transContent(newValue)
},
myValue(newValue) {
this.$emit('input', transContent(newValue))
}
},
2、transContent方法:
// 转换成普通字符
export function transContent(str) {
if (!str) return str
var arr = {
'lt': '<',
'gt': '>',
'nbsp': ' ',
'amp': '&',
'quot': '"'
}
return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function(all, t) {
return arr[t]
})
}
3、init增加配置:forced_root_block: '',写在配置项最前面
init: {
forced_root_block: '', // 清除标签显示
}
4、回显成功:
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。