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

相關文章
相關標籤/搜索