如何使用富文本编辑器-wangEditor

大家好，我是IT修真院郑州分院的学员，今天给大家分享一下，题目如何使用富文本编辑器-wangEditor？

一、背景介绍

富文本编辑器，Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器,提供类似于 Microsoft Word 的编辑功能。

富文本编辑器不同于文本编辑器，程序员可到网上下载免费的富文本编辑器内嵌于自己的网站或程序里（当然付费的功能会更强大些），方便用户编辑文章或信息。

二、知识剖析

wangEditor是用javascript编写的，轻量级web富文本编辑器，依赖于jQuery和fontAwesome字体库，支持所有浏览器。

wangEditor的使用方法有两种：

1.npm安装，命令是npm install wangEditor

2.在html文件中引入wangEditor.js或者wangEditor.min.js，在JS中定义

var E=window.wangEditor
var editor=new E("#editor")
editor.create();

三、常见问题

如何使用wangEdiotr？

四、解决方案

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>wangEditor</title>
</head>
<body>
  <div style="padding: 5px 0; color: #ccc">第一个编辑器</div>
  <div id="div1"></div>
  <div style="padding: 5px 0; color: #ccc">第二个编辑器</div>
  <div id='div2'></div>
  <div style="padding: 5px 0; color: #ccc">中间隔离带</div>
  <div id='div3'></div>


  <script src="https://cdn.bootcss.com/wangEditor/10.0.13/wangEditor.min.js"></script>
  <script>
    var E=window.wangEditor
    var editor1 = new E('#div1')

    editor1.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片
    // editor1.customConfig.uploadImgServer = '/upload'   //上传图片到服务器    
    // editor1.customConfig.showLinkImg = false  隐藏网络图片上传按钮
    // editor.customConfig.zIndex = 100 默认z-index=10000,会覆盖模态框
 
    //自定义工具栏 
    // editor1.customConfig.menus = [
    //     'head',
    //     'bold',
    //     'italic',
    //     'underline'
    // ] 

    editor1.create()
    editor1.$textElem.attr('contenteditable', false);//富文本编辑器禁用
    

    //创建第二个富文本编辑器，工具栏和编辑部分分离，单页面中可以生成多个富文本编辑器
    // var editor2 = new E('#div2','#div3')
    // editor2.create()
  </script>
</body>
</html>

五、编码实战

腾讯视频 PPT

六、拓展思考

富文本编辑器的比较

1.wangEditor

优点：轻量简洁，最重要的是开源且中文文档齐全。设计的UI漂亮。

缺点：缺少各种功能Demo。

UEditor

优点：插件多，基本满足各种需求由百度web前端研发部开发。

缺点：图片只能上传到本地服务器，如果需要上传到其他服务器需要改动源码，较为难办，加载速度慢。

CKEditor

优点：编辑能力极强，基本和word差不多了。

缺点：网站访问速度一般，文档英文，需要花时间开发。

七、参考文献

wangEditor3使用手册

富文本编辑器比较

八、更多讨论

1.讨论一：为什么wangEditor工具栏不能换行？

作者觉得换行比较丑，如果要要改的话目前的办法就是通过自定义工具栏。

2.讨论二：如何设置debug模式？

可通过editor.customConfig.debug = true配置debug模式，debug模式下，有 JS 错误会以throw Error方式提示出来。默认值为false，即不会抛出异常。

3.讨论三：怎么设置onchang的触发延迟时间？

// 自定义 onchange 触发的延迟时间，默认为 200 ms
editor.customConfig.onchangeTimeout = 1000 // 单位 ms

IT修真院是一个免费的线上IT技术学习平台。
每个职业以15个左右的task为初学者提供更快速高效的学习方式；
所有task均是从真实项目中提炼出来的技能点
强调实战演练+自学优先+师兄辅导的学习方式
严格的日报体系，欢乐的交流讨论学习气氛，更有无数师兄师姐帮你解疑答惑。
亲，准备好加入我们这个变态成长的修真宝地了吗？
点击官网链接，开始自己的修真之旅吧！

来源：CSDN

作者：cjwjyooo

链接：https://blog.csdn.net/cjwjyooo/article/details/81109323

标签

wangeditor

editor