说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

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

HTML文档下载 WORD文档下载 PDF文档下载
这个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

备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘