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中获得。

  这个控件的求实用规则比较简单,本文就不再简单赘述了,具体可参考官网中之运验证,没有几实施代码就能大概用了,读者可协调尝试在瞧。

  为了贯彻点击一个按钮就能够自动输出预定好之模版Bootstrap文字,具体落实如下:

  <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

相关文章