富文本编辑器 —— 学习笔记
一、wangEditor
1.内容处理——获取/设置 JSON
使用 editor.txt.setJSON([…]) 方法时,会将原本的内容替换为设置的JSON内容
例: 原内容
这是使用 editor.txt.setJSON([…]) 方法后
<script>
import E from 'wangeditor'
export default {
data() {
return {
editor:'',
addHtml: [ {
"tag": "p",
"attrs": [],
"children": [
"欢迎使用 ",
{
"tag": "b",
"attrs": [],
"children": [ "wangEditor" ]
},
" 富文本编辑器"
]
}]
}
},
mounted() {
this.timerr = Date.parse(this.timerr)
const editor = new E("#div1");
// 配置 onSelectionChange 回调函数
// 富文本发生改变时触发
editor.config.onSelectionChange = function (newSelection) {
console.log("onSelectionChange", newSelection);
console.log(editor.txt.getJSON()); // 获取JSON
};
editor.create();
// 原内容
editor.txt.html('<p>用 JS 设置的内容</p>'); // 重新设置编辑器内容
editor.txt.append('<p>追加的内容</p>');
editor.txt.setJSON(this.addHtml); // 设置JSON
}
}
</script>
今天需求遇到了,做个小记,后续遇到一些问题会持续更新,有问题的地方还请大家帮忙指出来,谢谢!