富文本编辑器wangEditor的使用

介绍

wangEditor 是一款基于JavaScript和CSS开发的Web富文本编辑器，其具有轻量级、简洁、易用的特点。当然，市面上有许多别的富文本编辑器，各有特点，本文专注于介绍wangEditor这一款富文本编辑器。首先明确一点，什么是富文本编辑器。相比于普通的文本编辑器，我们只能够输入文本类型的数据内容——文字、字母、数字、常见符号等，而富文本编辑器，重点突出在“富”字，其拓展了文本的局限性，使得我们直接在编辑框中输入超越文本的数据内容成为可能，其包括但不限于上传图片、输入表情、字体大小字号调整、颜色设置、对齐方式等的功能操作。

引入

要使用wangEditor 富文本编辑器，我们需要将其相关的js包引进来，依赖使用。一种方式是直接下载相关js包，另一种方式是使用CDN，直接进行在线引用。这里采用第二种方式的引入，下面贴出具体CDN地址：

https://unpkg.com/wangeditor/dist/wangEditor.min.js

在html页面中，使用以下代码即可完成引用：

<script type="text/javascript" src="https://unpkg.com/wangeditor/dist/wangEditor.min.js"></script>

（CDN地址亲测有效，官网使用手册给出的地址反而是引用不了的.

使用

基础编辑器

（成功引进js包之后）使用如下代码，创建编辑器

<!--首先给出一个div，并设id属性-->
<div id="div1"></div>

<script type="text/javascript">
  var E = window.wangEditor
  var editor = new E('#div1')
  // 创建编辑器
  editor.create()

</script>

运行html文件，打开浏览器，实现效果图如下：

实用性编辑器
上面创建的编辑器，输入内容是存放到div当中。但是一般情况下，我们希望将内容写入的是areatext标签当中，并且通常areatext在form表单中，能提交到后台并进一步存入数据库当中。
然而不巧的是，wangEditor从v3版本开始不支持 textarea。
但是并没有关系，我们依旧可以自己创建一个textarea标签，同时也创建一个div标签，依然是将内容写入div中，只需要把div的内容搬到textarea中，不就可以了吗？是这个道理，官方文档也确实是给出了这么个解决方法：通过监控div变化，将内容赋值给textarea即可。

<form action="">

<!--    创建textarea标签，将其设置隐藏即可-->
    <textarea id="text1" name="content" style="display: none;"></textarea>
    
    <!--首先给出一个div，并设id属性-->
    <div id="div1"></div>

    <script type="text/javascript">
        var E = window.wangEditor
        var editor = new E('#div1')
        //创建编辑器
        editor.create()
        
        //监听变化
        editor.config.onchange = (html) => {
            $('#text1').val(editor.txt.html())
        };
    </script>

</form>

（敲黑板：这里有一个点要注意的是，我们使用的是editor.config.onchange，而目前官方文档写的是editor.customConfig.onchange，这是不会生效的。其他的配置也一样，统一需要将customConfig换成config 。）

自定义编辑器功能

编辑器默认有的各种功能，我们可以依据自己的实际需求情况进行调整，可使用editor.config.menus定义显示哪些于菜单和菜单的顺序。

editor.config.menus=[

                'head', // 标题

                'bold', // 粗体 

                // 'fontSize', // 字号
                
                // 'fontName', // 字体

                'italic', // 斜体

                'underline', // 下划线 

                'strikeThrough', // 删除线

                'foreColor', // 文字颜色

                'backColor', // 背景颜色

                // 'link', // 插入链接 
                
                // 'list', // 列表 

                'justify', // 对齐方式

                'quote', // 引用

                'emoticon', // 表情

                'image', // 插入图片 

                'table', // 表格


                'undo', // 撤销

                'redo', // 重复
                'code', // 插入代码 

            ]

上传图片功能

这里强调一下用的比较多的上传图片的功能。
wangEditor编辑器，默认的上传图片方式是这样的：

需要我们输入网络图片的url，点击插入。
如果出现插入错误的情况，请检查是否是网络图片，是否是正确有效的url地址。（直接复制网上的图片的浏览器地址栏地址大概率是不行的，需是正确的、能够访问到的网络资源路径）
如若出现问题，按F12可以查看具体出现的问题，针对性解决问题。

这种方式具有很大的局限性，它也是无法直接插入本地电脑的图片的，当输入本机图片资源地址时会报错提示”Not allowed to load local resource”，这是由于浏览器的安全性设计，不能直接访问本地资源。

进阶上传图片功能

一般来说，上传图片很多情况下都是上传本机的图片文件，因此最好是能够直接点击，就打开电脑文件目录浏览，让我们选择图片上传插入。
我们需要添加以下语句：

editor.config.uploadImgServer ="/addimgServlet" ; // 上传图片到服务器，这里的路径是举个例子而已
   editor.config.uploadFileName = ""; //文件名

这个时候，就出现了如下的 效果图：

点击会出现本机的文件浏览目录，可以供我们选择图片。

然而到这里并不能够真正实现上传图片。要实现这种需求，需要我们自己写一个接口，实现将图片文件以流的形式或是其他形式写入到指定路径的这一过程，需要手动打代码实现。这是其一。
其二，成功上传文件之后，要将图片文件显示插入在编辑框中，很可能会出现插入失败的情况，这里给出的解决方案参考是设置虚拟路径。

该功能实现比较繁杂，这里不过多展示，有需要的小伙伴可以在评论区留言私信我。

结语

以上便是关于富文本编辑器wangEditor使用的介绍了。
富文本编辑器的使用还是比较常见的，需求也高，掌握起来对自己有利无害。
OK，本篇文章就到这里结束啦，欢迎大家交流谈论，一键三连。