wangEditor是基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费。博主个人认为这款富文本编辑器很好用。简单、上手快、功能还可以。
一、wangEditor的下载
wangEditor官网：http://www.wangeditor.com/
官方在线开发文档：https://www.kancloud.cn/wangfupeng/wangeditor3/332599
我们可以先到官网下载wangEditor
二、创建wangEditor编辑器
我们在官网下载wangEditor的压缩包之后，我们只需要把 release/目录下的wangEditor.js或者wangEditor.min.js这两个文件拿出来就行了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>wangEditor demo</title>
</head>
<body>
<!-- 下面的div就是wangEditor 编辑器的位置 -->
<div id="editor">
<p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>
<!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
<script type="text/javascript" src="/wangEditor.min.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>
</body>
</html>三、wangEditor3编辑器内容的提交
wangEditor3编辑器没有value属性值，无法直接提交表单，所以编辑器内容的提交需要和 input 输入框来结合使用。
我们在wangEditor编辑器的上面添加一个 input 输入框，并且将其type设置为“hidden”隐藏起来。这样做也是为了实际开发需要。
<input type="hidden" name="content" id="editor_txt">下面是js代码，大致意思就是我们用wangEditor3提供方法的获取编辑器内容后，把值再赋给input，这样就可以正常提交表单了。
<script type="text/javascript" src="js/wangEditor.js"></script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#editor')
editor.create()
document.getElementById('btn1').addEventListener('click', function () {
// 读取 html
var editor_txt=editor.txt.html();
document.getElementById('editor_txt').value=editor_txt;
}, false)
</script>最后附上一张wangEditor3编辑器的图，个人感觉还挺不错的。有兴趣的可以试试
