1. 引言
(先貼出wangHighLighter.js的github地址:https://github.com/wangfupeng1988/wangHighLighter注意,程序和使用說明的更新,都參見該網址爲準)
可能有朋友關注過我的wangEditor——基於bootstrap的富文本編輯器。做一個富文本編輯器其實沒多大意思,網上有的是編輯器插件。但是帶插入代碼並且支持代碼高亮的富文本編輯器就不多見了。這是其一。
其二,網上的代碼高亮工具(如:SyntaxHighlighter),一般需要引用js和css到頁面,頁面中本來就有靜態的文本,這樣結合起來顯示出高亮效果。而這種情況應用到富文本編輯器是不行的,因爲富文本編輯器編輯出來的東西一旦保存起來,還指不定在什麼樣的環境下加載顯示呢,怎麼能指望所有的頁面都去引用第三方的高亮插件?因此我們需要來一步轉換:
上圖表示的內容,不知道大家能不能明白。其實就是說,我們需要用富文本框編輯出來的代碼,到哪裏都能通吃,而不是依賴於第三方的插件(如:SyntaxHighlighter)
於是,我爲wangEditor開發了一個用於代碼高亮的插件——wangHighLighter——下載地址:https://github.com/wangfupeng1988/wangHighLighter
2. 使用wangHighLighter.js
wangHighLighter.js目前支持常用的20多種語言,並提供了7種常見的主題風格供選擇。
應用起來也非常簡單,只需要三步:
第一:引用wangHighLighter.js
在頁面中引用wangHighLighter.js
<script src="js/wangHighLighter-1.0.0-min.js" type="text/javascript"></script>
第二,綁定語言和主題
將wangHighLighter.js所支持的語言和主題,綁定到下拉列表中,供使用者選擇,如下圖:
通過wangHighLighter.getLangArray()方法可以獲取所有語言的數組;通過wangHighLighter.getThemeArray()方法可以獲取所有主題的數組。因此可以用如下代碼來綁定語言和主題:
語言: <select id="sltLang"></select> 主題: <select id="sltTheme"></select> <script type="text/javascript"> $(function () { var $sltLang = $('#sltLang'), langArray = wangHighLighter.getLangArray(), $sltTheme = $('#sltTheme'), themeArray = wangHighLighter.getThemeArray(), item, for (item in langArray) { $sltLang.append($('<option>' + langArray[item] + '</option>')); } for (item in themeArray) { $sltTheme.append($('<option>' + themeArray[item] + '</option>')); } }); </script>
第三,應用
通過wangHighLighter.highLight(lang, theme, code)方法可以高亮處理代碼,並返回。只需要傳入語言、主題和準備高亮的字符串,執行一步方法即可解決,是不是非常簡單?
$btn1.click(function () { var code = $txt1.val(), //獲取textarea中原始字符串 lang = $sltLang.val(), //獲取語言 theme = $sltTheme.val(), //獲取主題 highLightCode; highLightCode = wangHighLighter.highLight(lang, theme, code); //高亮處理代碼 $div1.html(highLightCode); });
這段代碼實現效果如下圖:
3. 在wangEditor中應用
wangEditor是一款基於bootstrap的富文本編輯器, 現在已經利用wangHighLighter.js爲wangEditor實現了“插入代碼”的功能!使wangEditor成爲一款互聯網上不多見的開源的可插入代碼的富文本編輯器。
4. 升級 & 更新
wangHighLighter.js 目前爲1.0.0版本,尚有一些bug和缺陷有待修復,我會在業餘時間不斷更新完善,是它成爲富文本編輯器插入代碼功能的得力助手!
另外,如果有時間,我會把wangHighLighter.js的源碼設計寫一篇文章說明一下,包括程序的結構以及其中正則表達式的應用。
QQ羣 164999061 ,歡迎加入討論!
-------------------------------------------------------------------------------------------------------------
歡迎關注我的微博。
也歡迎關注我的教程:
《從設計到模式》《深入理解javascript原型和閉包系列》《微軟petshop4.0源碼解讀視頻》《json2.js源碼解讀視頻》
-------------------------------------------------------------------------------------------------------------