所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解

前端之家收集整理的这篇文章主要介绍了所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文教大家如何使用bootstrap-wysiwyg文本编辑器,充分发挥编辑器的优势,希望大家可以有所收获。

主要特性: 超小5kb 自动的热键支持(MAC和windows) 拖放的插入图片支持图片上传支持手机拍照) 支持声音输入(chrome支持) 允许自定义的工具条,可以使用所有的bootstrap内容,字体 不使用任何强制的样式 …………………………

使用其实很简单的,倒入bootstrap相关CSS,JS,jQuery,还有bootstrap-wysiwyg的JS,如下:

定义相关菜单项目属性方法

').prependTo('#alerts');
};
initToolbarBootstrapBindings();
$('#editor').wysiwyg({ fileUploadError: showErrorAlert} );

最后是HTML代码:

<div class="btn-group">
<a class="btn" title="Insert picture (or just drag & drop)" id="pictureBtn"><i class="icon-picture">

<div id="editor">
输入内容

如果大家还想深入学习,可以点击进行学习,再为大家附一个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的Bootstrap相关文章