富文本编辑器wangEdittor使用入门

一、wangEdittor介绍

富文本编辑器为开源产品wangEditor。wangEditor是一款轻量级Web富文本编辑器，配置方便，使用简单。读者可在其官网和GitHub仓库进行更多了解。主要有以下功能：

1）图文混排
wangEditor可以编辑的内容比较丰富，使用wangEditor进行图文混排。

2）字体调整
wangEditor可以很方便的进行文本内容格式的调整，包括字体、字号大小、字体颜色、背景颜色等内容。
（3）全屏编辑
wangEditor在初始化时有默认宽度，通常在页面中只占有部分版面。读者如果觉得不方便编辑，也可以点击全屏编辑的按钮让编辑器最大化。

（4）多图上传
wangEditor支持图片上传功能。它不仅支持单图上传，也支持多图上传，非常人性化。
（5）图片处理
wangEditor支持调整图片位置、图片大小等内容。点击需要调整的图片，图片调整的工具栏就会出现，
wangEditor还有许多其他非常有意思的功能，比如插入表格、插入表情、插入代码等。这里就不再逐一演示了，读者可以点击工具栏中的各个按钮自行体验。


二、整合编码案例

1、新建HTML测试页面

在resources/static目录下新建wangEditor-test.html文件，并引入wangEditor的JS文件，代码如下所示：

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

（2）创建富文本编辑框DOM

在wangEditor-test.html页面中创建id为wangEditor的div标签。对它进行定义主要是为了后续编辑器的初始化。将它的id命名为wangEditor，该值可以自行修改，代码如下所示：