好库网 好库网首页 | 我的好库
JQuery入门

免费开源的Bootstrap富文本编辑器bootstrap-wysiwyg使用方法

发布者:jquery2000
发布日期:2015/6/22 17:19:26   更新日期:2015/6/22 17:40:30
阅读次数:1809
评分:4.80
介绍:这个jQuery Bootstrap小插件(5KB, < 200 行代码)可以将任何一个DIV转变成一个WYSIWYG富文本编辑器,灵感来自于 CLEditor 和 bootstrap-wysihtml5
正文:

这个jQuery Bootstrap小插件(5KB, < 200 行代码)可以将任何一个DIV转变成一个WYSIWYG富文本编辑器,灵感来自于 CLEditor 和 bootstrap-wysihtml5.

 

下面是他的主要特色:

在Mac和Wndows平台上能够自动针对常用操作绑定标准热键
可以通过拖拽插入图片;支持图片上传(也可以获取移动设备上的照片)
语音识别输入(仅限Chrome浏览器)
允许自定义工具条;不生成额外标签;支持网站充分利用Bootstrap、Font Awesome等工具库的优秀特性
没有强制规定的样式 - 一切都由你做主
依赖浏览器的标准特性,没有非标准代码;工具条和键盘功能均可定制,并且能够执行任何浏览器支持的命令
不会自己创建一个单独的frame、备份文本区等 - 本编辑器尽量保持简单,并仅仅运行在一个DIV内
(可选)清除尾部空格;清除空的div和span
必须运行在现代浏览器上(在Chrome 26、Firefox 19、Safari 6上经过测试,用户报告称可以在IE10上工作)
支持移动设备浏览器(在IOS 6 Ipad/Iphone 和 Android 4.1.1 Chrome上测试过)

 

使用方法
$('#editor').wysiwyg();
不要忘了给容纳编辑器的div设置样式:

#editor {overflow:scroll; max-height:300px}
如果你希望在移动设备浏览器上使用此编辑器,一定要看看 如何设置样式才能针对移动设备屏幕做优化并提升用户体验。

你还可以为编辑器创建一个工具条:

<div class="btn-toolbar" data-role="editor-toolbar"
data-target="#editor">
...
</div>
通过在工具条上添加一个带有data-edit属性的链接(a标签),可以让其执行简单的命令。

<a data-edit="bold">...</a>
为了执行更复杂的命令,可以为data-edit再添加一个参数;或者将链接用输入框(input标签)替代,并给输入框设置相应的data-edit命令(输入框中的数据将作为命令参数)。对于文件输入框,文件的内容将使用FileReader API来读取,读取到的数据作为命令执行结果。

<a data-edit="fontName Arial">...</a>
...
<input type="text" data-edit="createLink"/>
...
<input type="file" data-edit="insertImage" />
用标准的jQuery方法就可以设置、获取编辑器的内容或者为其设置焦点。此外,还可以获取清除HTML标签后的内容:

$('#editor').cleanHtml()

下载:http://www.okbase.net/file/item/33458


评论 [发表评论]
账号 密码 还没帐号呢,现在注册一个?

免责声明:好库网所展示的信息由买卖双方自行提供,其真实性、准确性和合法性由信息发布人负责。好库网不提供任何保证,并不承担任何法律责任。