wangEditorv3.1.1

wangEditor是基于javascript和css开发的一款轻量级web富文本编辑器，具有免费开源、易用、UI界面精致、与浏览器兼容性好的诸多特性，支持npm直接饮用，响应式与自动缩放，支持一个页面多个编辑器，支持多语言，多支持本地图片上传，功能非常强大，配置起来也很简单，开发人员可以轻松将它内嵌于自己的网站或程序。支持一个页面多个编辑器，支持多语言，多支持本地图片上传，配置起来也很简单，开发人员可以轻松将它内嵌于自己的网站或程序。

功能特色

1、支持 npm 直接引用。
2、支持响应式，自动缩放。
3、没有官方的实例销毁方案，项目中使用的是作者在github给出的临时方案。
4、支持一个页面多个编辑器。
5、不支持一个页面多个编辑器同时使用地图。
6、后端需要进行相应配置。

使用教程

wangeditor图片上传
一、非跨域上传
1、图片上传之前一直是wangEditor的诟病，当用户没做任何配置的时候，点击“菜单”按钮这样显示（只能插入网络图片）。

2、配置了上传组件之后，点击“菜单”按钮，就这样显示（能上传本地图片，也能插入网络图片）。

二、跨域上传
1、之前插入网络图片和上传图片是两个菜单，现在合并成了一个，没有配置该功能时，点击“菜单”按钮这样显示（只能插入网络图片）。

2、配置了url地址之后，点击“菜单”按钮，就这样显示（能上传本地图片，也能插入网络图片）。

wangeditor如何获取值
1、我们先百度搜索该富文本框的脚本文件，下载回来后，在自己的页面里引入该脚本。(我们的代码有用到Jquery，所以也把Jquery脚本引入了）。

2、然后是写一个DIV，该富文本框是嵌入到这个div里显示的，接着用JS脚本初始化富文本框。

3、运行页面后，我们就可以看到页面上有一个文本输入框了，而且支持输入各种格式。

4、我们可以在这个输入框里输入带格式的内容，比如H1标题文字，带下横线的文字，带背景色的文字，有序列表，表情符号等等。

5、输入了内容，我们怎么获取得到呢？
我们修改下代码，添加获取内容的按钮，点击按钮触发获取内容函数，在该函数上调用插件的ed.txt.html()方法，可以获取到富文本框里的内容。

6、页面刷新后，我们点击按钮，可以得到富文本框里输入的内容。因为是富文本，所以内容里会包含html代码。

7、如果不想获取内容里的html代码，只获取文字内容，我们可以把代码由var text = ed.txt.html(); 改成var text = ed.txt.text();即调用插件的 text方法，而不是html方法。

8、修改后，刷新页面，重新点击按钮，可以看到只返回了输入框的内容，不包含代码了。

9、除了在输入框里输入内容外，我们还可以用脚本为输入框添加内容。
修改代码，添加设置内容的按钮。为输入框设置内容，也是调用插件的ed.txt.html(text); 该方法的参数就是要输入的内容。

10、刷新页面后，我们点击按钮，可以看到脚本里设置的内容，已经成功输入到富文本框里了。

更新日志

wangEditor富文本编辑器第一版发布于2014年11月。2016年1月作者对整个代码进行了重构，发布 2.x 版本。经过本次重构，产品保持美观的UI基础上，又增加的功能的稳定性、框架的灵活性和可配置性。2.x 版本支持到 IE8 浏览器，主要体现在以下几个方面：
1、产品观的转变
做好产品定位，不擅长或者没必要的领域，千万不要涉及。要用，就搞一个集成方案。学会主动，主动给用户带来惊喜，哪怕是很小的。
2、修改官网首页
再美的人，也需要漂亮衣服的衬托，有一个漂亮的主页，能多吸引用户几秒钟的时间。相比于之前的首页，改版之后的首页，更加突出了内容和重点，这也是现在扁平化设计的一个核心思想。用户进入首页之后，首先看到的就是主标题和副标题，知道这是个什么东西。然后接着看到的就是那么大的一个demo演示。
3、修改文档页面
之前，软件的文档页面一直是一个很大的诟病，才导致了用户不看文档而是跑QQ群问我问题。而现在，一个文档页面，可以解决你所有的使用问题，左侧导航、右侧内容的方式，也是目前文档页面的常用风格。文档导航中，对功能进行了分类：基本应用、基本配置、图片上传、其他，把同类的功能，组合在一起。对图片上传（跨域、非跨域）这个比较复杂的配置，录制了视频进行演示，并提供视频中演示代码的下载。
4、修改图片上传方式
图片上传之前一直是软件的诟病，此前用户提出的问题中，大约有1/3到1/2跟图片上传有关。所以，我从很早就开始憋着要好好捣鼓捣鼓图片上传。
5、合并同类菜单
之前软件的菜单太多，这样就导致如果width太窄，菜单就会换行，换行就不好看。再者，菜单太多了，导致界面混乱，应用性差。