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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM