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 相关文章推荐
从URL中提取参数与将对象转换为URL查询参数的实现代码
Jan 12 Javascript
使用Grunt.js管理你项目的应用说明
Apr 24 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 Javascript
浅谈JavaScript对象与继承
Jul 10 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
Jul 19 Javascript
DropDownList控件绑定数据源的三种方法
Dec 24 Javascript
JS实现iframe自适应高度的方法示例
Jan 07 Javascript
thinkjs 文件上传功能实例代码
Nov 08 Javascript
解读vue生成的文件目录结构及说明
Nov 27 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
详解javascript 变量提升(Hoisting)
Mar 12 Javascript
浅谈VUE中演示v-for为什么要加key
Jan 16 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笔试题
2009/08/04 PHP
php中的观察者模式
2010/03/24 PHP
php图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
解析WordPress中函数钩子hook的作用及基本用法
2015/12/22 PHP
PHP5.5安装PHPRedis扩展及连接测试方法
2017/01/22 PHP
发现的以前不知道的函数
2006/09/19 Javascript
禁止你的左键复制实用技巧
2013/01/04 Javascript
浅析js设置控件的readonly与enabled属性问题
2013/12/25 Javascript
jquery 获取dom固定元素 添加样式的简单实例
2014/02/04 Javascript
AngularJS实现表单验证
2015/01/28 Javascript
mpvue全局引入sass文件的方法步骤
2019/03/06 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
2019/06/13 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
jQuery操作元素的内容和样式完整实例分析
2020/01/10 jQuery
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
pymysql 开启调试模式的实现
2019/09/24 Python
Python序列类型的打包和解包实例
2019/12/21 Python
Python获取二维数组的行列数的2种方法
2020/02/11 Python
利用python生成照片墙的示例代码
2020/04/09 Python
Python如何实现定时器功能
2020/05/28 Python
pytorch SENet实现案例
2020/06/24 Python
filter使用python3代码进行迭代元素的实例详解
2020/12/03 Python
html5生成柱状图(条形图)效果的实例代码
2016/03/25 HTML / CSS
BIBLOO捷克:购买女装、男装、童装、鞋和配件
2017/01/27 全球购物
香港最大的洋酒零售连锁店:屈臣氏酒窖(Watson’s Wine)
2018/12/10 全球购物
董事长秘书岗位职责
2013/11/29 职场文书
新三好学生主要事迹
2014/01/23 职场文书
志愿者服务感言
2014/02/27 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
python字符串常规操作大全
2021/05/02 Python
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS