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中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
Nov 30 Javascript
Javascript合并表格中具有相同内容单元格示例
Aug 11 Javascript
js将当前时间格式转换成时间搓(自写)
Sep 26 Javascript
jQuery实现3D文字特效的方法
Mar 10 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
Jan 23 Javascript
JS组件Bootstrap Table布局详解
May 27 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
Sep 08 Javascript
jQuery.uploadify文件上传组件实例讲解
Sep 23 Javascript
JS两种类型的表单提交方法实例分析
Nov 28 Javascript
JavaScrpt的面向对象全面解析
May 09 Javascript
ES6解构赋值的功能与用途实例分析
Oct 31 Javascript
Vue的生命周期一起来看看
Feb 24 Vue.js
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更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
php fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
如何使用PHP给图片加水印
2016/10/12 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
JavaScript初学者需要了解10个小技巧
2010/08/25 Javascript
js 操作select与option(示例讲解)
2013/12/20 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
jQuery实现数秒后自动提交form的方法
2015/03/05 Javascript
vue router下的html5 history在iis服务器上的设置方法
2017/10/18 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
2018/08/25 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
命令行批量截图Node脚本示例代码
2019/01/25 Javascript
在Vue项目中使用snapshot测试的具体使用
2019/04/16 Javascript
layui 对弹窗 form表单赋值的实现方法
2019/09/04 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
2020/02/16 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
Python button选取本地图片并显示的实例
2019/06/13 Python
简单了解python反射机制的一些知识
2019/07/13 Python
解决Mac下使用python的坑
2019/08/13 Python
解决pycharm中的run和debug失效无法点击运行
2020/06/09 Python
Python 解析库json及jsonpath pickle的实现
2020/08/17 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
html5 拖拽及用 js 实现拖拽功能的示例代码
2020/10/23 HTML / CSS
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
英智兴达软件测试笔试题
2016/10/12 面试题
区域总监的岗位职责
2013/11/21 职场文书
船舶专业个人求职信范文
2014/01/02 职场文书
职业生涯规划书基本格式
2014/01/06 职场文书
产品设计开发计划书
2014/05/07 职场文书
党支部换届选举方案
2014/05/08 职场文书
年终奖发放方案
2014/06/02 职场文书
销售团队口号大全
2014/06/06 职场文书
golang中字符串MD5生成方式总结
2021/07/04 Golang
Java的Object类的九种方法
2022/04/13 Java/Android
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle