Bootstrap富文本编辑器-bootstrap-wysiwyg

  在进行英语试题的录入中,由于英语试题常常会有相似以下的试题:html

My friend watches dragon boat races at the Dragon Boat Festival.(对划线部分提问)jquery

——_______ is the Double Ninth Festival?git

——It is in October.github

  在上面的题目中,咱们须要寻找一个可以对下划线进行编辑的富文本编辑器,同时为了可以加快编辑的速度,能够对在试题的录入中经常使用的几种模式进行预约义,好比——,_____符号的自动录入。bootstrap

  在网上进行了一番调查以后,咱们发现bootstrap-wysiwyg能够知足咱们的需求。编辑器

  这个控件能够从https://github.com/steveathon/bootstrap-wysiwyg中找到(最新版)。google

  在bootstrap-wysiwyg/examples/html-editor.html官方例子中能够找到相关的html编辑器的使用方式。spa

  在这个官方的例子中,当下载下来后会发现不能使用,主要是缺少jquery.hotkeys.js和google-code-prettify/src/prettify.js,这些js能够从https://github.com/mindmup/bootstrap-wysiwyg/tree/master/external中得到。code

  这个控件的具体使用规则比较简单,本文就再也不简单赘述了,具体能够参考官网中的使用说明,没有几行代码就能简单使用了,读者能够本身尝试着看看。htm

  为了实现点击一个按钮就能自动输出预约好的模板文字,具体实现以下:

  <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

相关文章
相关标签/搜索