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 相关文章推荐
jQuery 1.9使用$.support替代$.browser的使用方法
May 27 Javascript
Jquery实现由下向上展开效果的例子
Dec 08 Javascript
js实现数字每三位加逗号的方法
Feb 05 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
javascript中FOREACH数组方法使用示例
Mar 01 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
May 03 Javascript
javascript简单实现等比例缩小图片的方法
Jul 27 Javascript
你不知道的 javascript【推荐】
Jan 08 Javascript
JS实现简单短信验证码界面
Aug 07 Javascript
基于webpack.config.js 参数详解
Mar 20 Javascript
微信开发之微信jssdk录音功能开发示例
Oct 22 Javascript
原生js实现随机点名
Jul 05 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
提升PHP执行速度全攻略(上)
2006/10/09 PHP
PHP屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
2013/03/06 PHP
php中生成随机密码的自定义函数代码
2013/10/21 PHP
php读取csv实现csv文件下载功能
2013/12/18 PHP
PHP判断变量是否为0的方法
2014/02/08 PHP
高质量PHP代码的50个实用技巧必备(下)
2016/01/22 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
PHP PDOStatement::fetchObject讲解
2019/02/01 PHP
jquery 简单导航实现代码
2009/09/11 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
2013/03/26 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
vue-cli + sass 的正确打开方式图文详解
2017/10/27 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
2018/04/26 Javascript
Vue数据绑定简析小结
2019/05/07 Javascript
详解从vue-loader源码分析CSS Scoped的实现
2019/09/23 Javascript
通过实例了解Javascript柯里化流程
2020/03/03 Javascript
[25:45]2018DOTA2亚洲邀请赛4.5SOLO赛 Sylar vs Paparazi
2018/04/06 DOTA
讲解Python中运算符使用时的优先级
2015/05/14 Python
Python实现二叉堆
2016/02/03 Python
教你使用python画一朵花送女朋友
2018/03/29 Python
Python学习笔记之pandas索引列、过滤、分组、求和功能示例
2019/06/03 Python
Python PyQt5 Pycharm 环境搭建及配置详解(图文教程)
2019/07/16 Python
python爬虫爬取幽默笑话网站
2019/10/24 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
巴西最大的家电和百货零售商:Casas Bahia
2016/11/22 全球购物
婴儿地球:Baby Earth
2018/12/25 全球购物
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
公司财务流程之主管工作流程
2014/03/03 职场文书
《彭德怀和他的大黑骡子》教学反思
2014/04/12 职场文书
董事长助理工作职责
2014/06/08 职场文书
公司员工离职证明书
2014/10/04 职场文书
离退休人员聘用协议书
2014/11/24 职场文书
德能勤绩工作总结
2015/08/11 职场文书