在進行英語試題的錄入中，因為英語試題經常會有類似如下的試題：

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

轉載于:https://www.cnblogs.com/dreampursuer/p/5538882.html

總結

以上是生活随笔為你收集整理的Bootstrap富文本编辑器-bootstrap-wysiwyg的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。