顶部

bootstrap-wysiwyg
为Bootstrap定制的微型所见即所得（What you see is what you get）富文本编辑器

 
Go ahead…

关于

这个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上测试过）

Why?


While building a content editor for MindMup we found plenty of good HTML5 WYSWYG editors online, but most were duplicating functionality that already exists in JQuery and Bootstrap, implementing things that were meanwhile added to HTML5 and supported in major browsers, or doing too much magic such as inserting IFrames with backup text-areas. Most of this was to work around quirks in older browsers (which we didn't need) and caused focus problems on touch devices (which was an issue for us). Too much magic caused problems with bootstrap modals (a must for us). Most editors also build their own toolbars, which embed additional CSS and images and always turn out to be much worse than standard Bootstrap buttons.

It turns out, with HTML5, everything we need can fit into less than 5K. We built this tiny tiny editor that does everything we need, does not impose any particular additional CSS and uses modern browser functionality without reimplementing JQuery and Bootstrap.

It's released under the MIT license, so fork and enjoy!

使用方法

$('#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()

View project on Github

Fork me on GitHub