Bootstrap富文本编辑器-bootstrap-wysiwyg
Posted 曾想技术改变世界，不料世界改变了我们
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Bootstrap富文本编辑器-bootstrap-wysiwyg相关的知识，希望对你有一定的参考价值。
在进行英语试题的录入中，因为英语试题经常会有类似如下的试题：
My friend watches dragon boat races at the Dragon Boat Festival.(对划线部分提问)
——_______ is the Double Ninth Festival?
——It is in October.
在上面的题目中，我们需要寻找一个能够对下划线进行编辑的富文本编辑器，同时为了能够加快编辑的速度，可以对在试题的录入中常用的几种模式进行预定义，比如——，_____符号的自动录入。
在网上进行了一番调查之后，我们发现bootstrap-wysiwyg可以满足我们的需求。
这个控件可以从https://github.com/steveathon/bootstrap-wysiwyg中找到（最新版）。
在bootstrap-wysiwyg/examples/html-editor.html官方例子中可以找到相关的html编辑器的使用方式。
在这个官方的例子中，当下载下来后会发现不能使用，主要是缺乏jquery.hotkeys.js和google-code-prettify/src/prettify.js，这些js可以从https://github.com/mindmup/bootstrap-wysiwyg/tree/master/external中获得。
这个控件的具体使用规则比较简单，本文就不再简单赘述了，具体可以参考官网中的使用说明，没有几行代码就能简单使用了，读者可以自己尝试着看看。
为了实现点击一个按钮就能自动输出预定好的模板文字，具体实现如下：
<a class="btn btn-default" data-edit="insertText ____" title=""><i class="fa fa-align-justify"></i></a>
在上面这段简单的代码中，主要是在data-edit属性中使用了insertText命令，这个命令后可以带上相关的文本参数。
完整的命令可以参考：https://developer.mozilla.org/en-US/docs/Web/API/document/execCommand#Commands
以上是关于Bootstrap富文本编辑器-bootstrap-wysiwyg的主要内容，如果未能解决你的问题，请参考以下文章