基于bootstrap的富文本编辑器 wangEditor__wangEditor_bootstrap_jQuery_textarea_Font-Awesome_

当前位置: 软件>JavaScript软件

基于bootstrap的富文本编辑器 wangEditor

来源: 发布时间：2014-12-30

本文导语: wangEditor——基于bootstrap的富文本编辑器。引用bootstrap和jQuery后，你可以用一句代码制作一个富文本编辑器！注意：最新的版本升级和使用手册已Github中为主，请参见：https://github.com/wangfupeng1988/wangEditor 1. 引用bootstrap和...

wangEditor——基于bootstrap的富文本编辑器。引用bootstrap和jQuery后，你可以用一句代码制作一个富文本编辑器！

注意：最新的版本升级和使用手册已Github中为主，请参见：https://github.com/wangfupeng1988/wangEditor

基于bootstrap的富文本编辑器 wangEditor[图片]

1. 引用bootstrap和jQuery

使用wangEditor首先需要在您的页面中引用bootstrap（以及Font-Awesome图标库）和jQuery，如果您的系统中没有以上库，可以直接在github下载。

2. 使用wangEditor

引用了bootstrap（以及Font-Awesome图标库）和jQuery之后，就可以使用wangEditor了。

$(function () { $('#divEditor').wangEditor({ codeTargetId: 'txtCode', //将源码存储到txtCode frameHeight: '200px', //默认值为“300px” initWords: '欢迎使用！请输入文字...', //默认值为“请输入...” showInfo: true //是否显示“关于”菜单，默认显示 }); });

如以上代码：在html中加入一个div，一个textarea；引用wangEditor.min.js；然后执行一步绑定，即可使用wangEditor富文本编辑器！

编辑器内容的源代码会自动保存到textarea中，可直接用javascript获取，通过ajax保存。如下图：基于bootstrap的富文本编辑器 wangEditor[图片]

3. 对于低版本浏览器

由于bootstrap已经不支持IE8及以下版本浏览器。因此，对于IE8及以下版本浏器，wangEditor会自动识别，并屏蔽掉富文本编辑功能，只保留简单的编辑框功能。

编辑器内容的源代码也会自动保存到textarea中，可直接用javascript获取，通过ajax保存。如下图：基于bootstrap的富文本编辑器 wangEditor[图片]

4. 交流

想要一起合作开发的朋友可以直接在 OSC 留言给作者：）

您可能感兴趣的文章:

Bootstrap UI 编辑器 bootstrap-themeroller

Markdown 编辑器 Bootstrap Markdown

本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。