富文本编辑器想必大家都见过，无论是发表博客还是论坛发帖、空间发表说说，这些软件或网站都会用到富文本编辑器。那么，作为programmer，我们如何给自己的代码加上一个富文本编辑器呢？实际的需求就是textarea这个标签只能够传递文本，而无法传递一些诸如图片、表格之类的复杂元素，这个时候使用富文本编辑器就很有必要了。
今天介绍一下我最近使用的一款轻便的富文本编辑器——wangEditor。
官网地址：wangEditor官网-下载
手册地址：wangEditor3使用手册
下面介绍一下wangEditor3的使用方法：
一、下载与引入
从官网上的下载地址下载压缩包后，解压打开会看见如下目录：
将其中的release目录下的文件复制到自己项目的静态资源目录下，如我这里：
然后使用如下代码引用即可：
<script type="text/javascript" th:src="@{/wangEditor/wangEditor.min.js}"></script>
<script type="text/javascript" th:src="@{/wangEditor/wangEditor.js}"></script>注：以上是springboot中thymeleaf模板下的写法，此外也可以使用CDN引入，关于这一点在手册中都有说明。
二、创建编辑器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>wangEditor demo</title>
</head>
<body>
<div id="editor">
<p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>
<button type="button" style="width:150px;height:30px;" onclick="submitEditor()">提交</button>
<script type="text/javascript" th:src="@{/wangEditor/wangEditor.js}"></script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#editor')
// 或者 var editor = new E( document.getElementById('editor') )
editor.create()
</script>
<script>
function submitEditor(){
//使用editor.txt.html()获取编辑器里的HTML，使用editor.txt.text()获取编辑器里的文本——即删去HTML标签的纯文本
console.log("html : "+editor.txt.html());
console.log("text :"+editor.txt.text());
}
</script>
</body>
</html>效果图：
四、保存编辑器内容至服务器
上面我们成功创建了编辑器，可以编辑富文本，但怎么将编辑器里的内容保存到服务器呢，查看wangEditor官方手册可以找到：
editor.txt.html()和editor.txt.text()用于获取编辑器内容。插入图片链接，点击页面上的提交按钮，可以看到如下情景：
观察下方控制台里面的输出可以看到
submitEditor()方法被触发后的效果。
有关wangEditor的部分就介绍到这里，关于菜单配置、图片上传等内容请移步wangEditor3使用手册；