• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

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

vue 搞代码 4年前 (2022-01-08) 44次浏览 已收录 0个评论

这篇文章主要介绍了Vue 中使用富文本编译器wangEditor3的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

在开发的过程中由于某些特殊需求,被我们使用,今天我就简单讲一讲如何在vue中使用wangEditor3

首先讲一下简单的使用。

1、使用npm安装

 npm install wangeditor --save

2、vue页面代码如下

  <section> <div id="div5"></div><div id="div6"></div><button id='complete'></button></section> #div6 { height: 200px; background: #f1f7f9; } 

3、呈现效果如下

4、常见报错

(1)Error in mounted hook: "HierarchyRequestError: Failed to execute 'appendChild' on 'Node': The new child element contains the parent."found in

错误原因:当我们把该组件B引入另一组件A中,A中也使用了文本编译器,当new Vue的时候id名重复就会造成该错误,所以只需要换一个id号就可以了。

(2)文本框编辑处不能使用复制黏贴功能
原因父元素设置了contenteditable="fase"属性,改为true或者去掉都可以

(3)可以使用复制黏贴功能时,通过F12打开控制台,可以看到复制黏贴之后在容器内会生成多个span标签,这样通过button取的内容很冗余;
原因:子元素的背景和父元素背景不一致
方法:将父元素其他的子元素移除,让子父元素背景一致

(4) input标签内部不能使用富文本编译框的菜单

以上就是Vue 中使用富文本本文来源gaodai#ma#com搞*代#码9网#编译器wangEditor3的方法的详细内容,更多请关注gaodaima搞代码网其它相关文章!


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Vue 中使用富文本编译器wangEditor3的方法

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址