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

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

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/257113.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/257113.shtml
英文地址,請注明出處:http://en.pswp.cn/news/257113.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

學習筆記(06):Python網絡編程并發編程-在簡單套接字基礎上加上通信循環

立即學習:https://edu.csdn.net/course/play/24458/296235?utm_sourceblogtoedu 1.服務器端 #以打電話通訊為例子進行說明 #導入相應的模塊 import socket#1、設置套接字的類型以及協議(買手機)&#xff0c;其實就是設置一個套接字&#xff0c;phone即為一個套接字 #設置為網…

怎么把word轉換pdf,pdf轉換word ,pdf轉換成高清圖片

方法一&#xff1a;一個成套的軟件&#xff0c;包含了&#xff0c;word -->pdf ,Pdf—>word,pdf-->圖片 迅捷PDF在線轉換器 地址在這 &#xff08;http://app.xunjiepdf.com/ &#xff09;&#xff0c; 但是上面這個有個限制&#xff0c;只能轉一定大小的文件&#x…

程序包com.sun.istack.internal不存在

添加一下依賴 <!-- https://mvnrepository.com/artifact/com.sun.xml.bind/jaxb-impl --><dependency> <groupId>com.sun.xml.bind</groupId> <artifactId>jaxb-impl</artifactId> <version>2.2.11</version></dependency&…

iOS微博項目(七)發微博和定位

class a導入class b&#xff0c;class b導入class a 會出現錯誤 如果keyboard不顯示&#xff0c;應該是hardware-》connect選擇了 1. 發微博UI 2.定位 一直不回調&#xff0c;后來發現是ios8后方法更新了&#xff1a;http://blog.devzeng.com/blog/ios8-corelocation-framework…

學習筆記(07):Python網絡編程并發編程-客戶端與服務端代碼bug修復

立即學習:https://edu.csdn.net/course/play/24458/296236?utm_sourceblogtoedu 1.修復端口被占用的bug import socketphone socket.socket(socket.AF_INET,socket.SOCK_STREAM)#修復重復多次運行程序斷就被占用的bug&#xff0c;在綁定端口前設置 phone.setsockopt(socket.…

設計模式之UML類圖

在學設計模式的過程中經常碰到各式各樣的UML類圖。那些眼花繚亂的符號有什么含義呢&#xff1f; 類圖含義 類圖中的關系 從網上找來一張圖作為實例 依賴關系&#xff1a;比如動物依賴氧氣和水&#xff0c;這里如學生要依賴自行車。用虛線箭頭表示。關聯關系&#xff1a;學生和身…

tomcat啟動報:No Spring WebApplicationInitializer types detected on classpath

2019獨角獸企業重金招聘Python工程師標準>>> 對于maven項目&#xff0c;tomcat啟動不加載spring配置文件&#xff0c;是因為找不到web.xml文件 右鍵項目properties 選擇 Deployment Assembly 編輯 Web Deployment Assembly&#xff0c;注意主要是紅色線框中的路徑 …

拿到項目怎么開始整理PCB原理圖

1、用模塊拼接&#xff0c;不停的做實驗 2、網上各種搜索資料&#xff0c;確定好方案 3、最后落實PCB板原理圖&#xff0c;然后做板子出來

Java中的面向接口編程

面向接口編程是很多軟件架構設計理論都倡導的編程方式&#xff0c;學習Java自然少不了這一部分&#xff0c;下面是我在學習過程中整理出來的關于如何在Java中實現面向接口編程的知識。分享出來&#xff0c;有不對之處還請大家指正。 接口體現的是一種規范和實現分離的設計哲學&…

Linux-正則表達式學習(精)

正則表達式30分鐘入門教程 來園子之前寫的一篇正則表達式教程&#xff0c;部分翻譯自codeproject的The 30 Minute Regex Tutorial。 由于評論里有過長的URL,所以本頁排版比較混亂,推薦你到原處查看,看完了如果有問題,再到這里來提出. 一些要說的話&#xff1a; 如果你沒有正則表…

學習筆記(08):Python網絡編程并發編程-實現服務端可以對多個客戶端提供服務

立即學習:https://edu.csdn.net/course/play/24458/296237?utm_sourceblogtoedu 鏈接循環&#xff0c;一個服務器服務多個客戶端&#xff0c; 思路1&#xff1a;服務器一個一個地去服務客服端&#xff0c;等服務完一個客戶端后&#xff0c;再去服務下一個客戶端。 弊端&#…

在win10 或者win7系統下裝雙系統ubuntu16.04教程

1、制作u盤啟動&#xff0c;網上有教程推薦使用軟碟通 2、我的是聯想電腦&#xff0c;用分區助手將你的硬盤劃分出來一塊空白的&#xff0c;記得主分區不要超過4個&#xff0c;要不然你劃分出來的空白區裝系統是無用狀態&#xff08;分空白硬盤網上有教程&#xff09; 3、將u盤…

Flume sink=avro rpc connection error

要求 conf 文件 a1.sourcesr1 a1.sinksk1 a1.channelsc1a1.sources.r1.typeavro a1.sources.r1.bindmaster a1.sources.r1.port9999a1.sinks.k1.typeavro a1.sinks.k1.hostnameslave1 a1.sinks.k1.port7777a1.channels.c1.typememory a1.channels.c1.capacity1000 a1.channels.…

【騰許Bugly干貨分享】“HTTPS”安全在哪里?

背景 最近基于興趣學學習了下 HTTPS 相關的知識&#xff0c;在此記錄下學習心得。 在上網獲取信息的過程中&#xff0c;我們接觸最多的信息加密傳輸方式也莫過于 HTTPS 了。每當訪問一個站點&#xff0c;瀏覽器的地址欄中出現綠色圖標時&#xff0c;意味著該站點支持 HTTPS 信息…

CCNP精粹系列之十八--路由映射實戰二,博主推薦文章

路由映射實戰二 本篇博文和上一篇是緊密結合的&#xff0c;只是在上個試驗的基礎上作了改動&#xff0c;達到其他的試驗效果。試驗二&#xff1a;在R1上增加一個網段&#xff0c;并發布路由。這里采用三種方法。 如下是第一種&#xff0c;是在試驗一的基礎上直接增加一個網段&a…

HDU 1599 find the mincost route

Floyd可解。求最短。在路上來回。使用Floyd 而在 三同時不 找出最短。然后更新。沒有推理啟動&#xff01;INF。一堆負面結果溢出。 #include<cstdio> #include<cstring> #include<string> #include<queue> #include<algorithm> #include<map…

學習筆記(09):Python網絡編程并發編程-模擬ssh遠程執行命令-代碼實現

立即學習:https://edu.csdn.net/course/play/24458/296239?utm_sourceblogtoedu 1.服務器端&#xff1a;接收客戶端發送的命令,subprocess.POPE()函數可用于產生一個子進程&#xff0c;并且返回子進程的結果 import socket import subprocessphone socket.socket(socket.AF…

C++中兩個數交換不引進中間變量的方法

int a8,b2; 二進制的a1000,b0010; aa方法一&#xff1a;使用異或思想&#xff08;最高級方法&#xff09; aa^b; ba^b; aa^b 方法二&#xff1a;使用加法加法&#xff08;高級方法&#xff09; aab; ba-b; aa-b; 方法三&#xff1a;引進中間變量&#xff08;一般方法&#xff0…

【JUC】JDK1.8源碼分析之ConcurrentLinkedQueue(五)

一、前言 接著前面的分析&#xff0c;接下來分析ConcurrentLinkedQueue&#xff0c;ConcurerntLinkedQueue一個基于鏈接節點的無界線程安全隊列。此隊列按照 FIFO&#xff08;先進先出&#xff09;原則對元素進行排序。隊列的頭部是隊列中時間最長的元素。隊列的尾部 是隊列中時…

學習筆記(10):Python網絡編程并發編程-粘包現象

立即學習:https://edu.csdn.net/course/play/24458/296240?utm_sourceblogtoedu粘包現象&#xff1a;服務器接收到客戶端的命令后&#xff0c;進行執行得到結果后&#xff0c;再發送回給客戶端&#xff0c;在這個過程中如果服務器返回的結果的字節數會大于客戶端所接收最大字節…