在Vue中使用富文本编译器wangEditor3的方法

富文本编译器在vue中的应用

在开发过程中，因为一些特殊的要求，被我们使用。今天，我将简要谈谈如何在vue中使用wangEditor3

首先，我们来谈谈简单使用。

1.使用npm安装

npm安装wangeditor - save2和vue页面的代码如下

模板节div id=' div 5 '/div div id=' div 6 '/div按钮id=' complete '/按钮/节/模板脚本从' wangeditor '导入编辑器；导出默认{ data(){ return }；}，挂载(){ var editor=new Editor('#div5 '，' # div 6 ')；editor . customconfig . onchange=html={ console . log(editor . txt . html())；};editor . create()；//要在文本编译框中获取html，可以添加一个事件来获取document . getelementbyid(' complete ')。addeventlistener ('click ')，function(){ varjson=editor . txt . getjson()；//获取JSON格式的内容var jsonStr=JSON . stringify(JSON)；console . log(JSON)；console . log(jsonStr)；});}};/script style lang=' SCS ' # div 6 { height : 200 px；background : # f1f 7 F9；}/style3。渲染效果如下

4.常见错误

(1)装入的挂钩：“hierarchy requestserror :”中出错，无法在“节点”:上执行“appendChild”新的子元素包含父元素发现于

错误原因：当我们将这个组件b引入另一个组件a时，也使用了文本编译器。当使用new Vue时，重复的id名称会导致此错误，因此我们只需要更改id号。

(2)文本框的编辑部分不能使用复制粘贴功能。父元素设置了contenteditable='fase '属性，该属性可以更改为true或删除

(3)当可以使用复制粘贴功能时，可以通过F12打开控制台，可以看到复制粘贴后会在容器中生成多个span标签，因此通过按钮检索的内容是多余的；原因：子元素背景与父元素背景不一致。方法：移除父元素的其他子元素，使子元素和父元素的背景一致

(4)富文本编译框的菜单不能在输入标签内使用

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。