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


Posted in Javascript onSeptember 26, 2019

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

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

首先讲一下简单的使用。

1、使用npm安装

npm install wangeditor --save

2、vue页面代码如下

<template>
 <section>
 <div id="div5"></div>
 <div id="div6"></div>
 <button id='complete'></button>
 </section>
</template>
<script>
import Editor from "wangeditor";
export default {
 data() {
 return {};
 },
 mounted() {
 var editor = new Editor("#div5", "#div6");
 editor.customConfig.onchange = html => {
  console.log(editor.txt.html());
 };
 editor.create();
 
 //想获取文本编译框内的html,可以添加事件获取
 document.getElementById("complete").addEventListener("click", function() {
  var json = editor.txt.getJSON(); // 获取 JSON 格式的内容
  var jsonStr = JSON.stringify(json);
  console.log(json);
  console.log(jsonStr);
 });
 }
};
</script>
<style lang="scss">
#div6 {
 height: 200px;
 background: #f1f7f9;
}
</style>

3、呈现效果如下

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

4、常见报错

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

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

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

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript不同页面传值的改进版
Sep 30 Javascript
js命名空间写法示例
Dec 18 Javascript
javascript每日必学之条件分支
Feb 17 Javascript
js+css实现select的美化效果
Mar 24 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
Sep 14 Javascript
2种简单的js倒计时方式
Oct 20 Javascript
详解使用create-react-app添加css modules、sasss和antd
Jul 31 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
webpack-mvc 传统多页面组件化开发详解
May 07 Javascript
js实现随机点名功能
Dec 23 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
7个你应该知道的JS原生错误类型
Apr 29 Javascript
react实现同页面三级跳转路由布局
Sep 26 #Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 #Javascript
小程序调用微信支付的方法
Sep 26 #Javascript
细说webpack6 Babel的使用详解
Sep 26 #Javascript
微信小程序实现拖拽功能
Sep 26 #Javascript
vue用BMap百度地图实现即时搜索功能
Sep 26 #Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 #Javascript
You might like
全国FM电台频率大全 - 18 湖南省
2020/03/11 无线电
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
PHP使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
jquery的颜色选择插件实例代码
2008/10/02 Javascript
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
JS批量操作CSS属性详细解析
2013/12/16 Javascript
angularjs基础教程
2014/12/25 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
JS判断字符串包含的方法
2015/05/05 Javascript
AngularJS的表单使用详解
2015/06/17 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
如何检测JavaScript的各种类型
2016/07/30 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
jQuery绑定事件的四种方式介绍
2016/10/31 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
2017/01/05 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
最简单的JS实现json转csv的方法
2019/01/10 Javascript
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
详解Node.js异步处理的各种写法
2019/06/09 Javascript
基于python 字符编码的理解
2017/09/02 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
Python实现的txt文件去重功能示例
2018/07/07 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
CSS3样式linear-gradient的使用实例
2017/01/16 HTML / CSS
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
亚洲独特体验旅游专家:eOasia
2018/08/15 全球购物
服务生自我鉴定
2014/01/22 职场文书
团支部建设方案
2014/05/02 职场文书
责任胜于能力演讲稿
2014/05/20 职场文书
单位工作证明书格式
2014/10/04 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
财务人员个人工作总结
2015/02/27 职场文书