基於bootstrap的富文本框——wangEditor【歡迎增加開發】

 先來一張效果圖：

01. 引言

老早就開始研究富文本框的東西，在寫完《深入理解javascript原型與閉包》之后，就想着要去做一個富文本框的插件的樣例。

如今網絡上開源的富文本框插件許多，一搜索一大堆，可是基於bootstrap的還不多。如今僅僅有一個“bootstrap-wysiwyg”。老外寫的，沒有一個漢字。大家能夠fork一下源代碼看看，寫的很簡潔。壓縮之后不到10KB。很厲害！我也還沒來得及研究，一定要看一下。

02. wangEditor

老外的東西，滿地英文，給程序員用着還能夠，可是做到頁面上讓網民、用戶去使用，這就太慘無人道了。於是乎我自己做了一個基於bootstrap的富文本編輯器——wangEditor。現已開源，大家能夠去【https://github.com/wangfupeng1988/wangEditor/】fork源代碼。

如今僅僅是一個簡單的測試版，假設大家用着有啥問題，能夠直接給我留言或者給我發郵件(wangfupeng1988#（#->@）163.com)，在此感謝先！

03. 簡單易用，兩步搞定

wangEditor的應用很easy，兩步搞定！且看下面代碼：

<div id="divEditor"></div>
<textarea id="txtCode" rows="5" cols="50" style="width:100%"></textarea>

<script src="javascript/wangEditor-1.0.0.js" type="text/javascript"></script>
<script type="text/javascript">
        $(function () {
            $('#divEditor').wangEditor({
                codeTargetId: 'txtCode',              //將源代碼存儲到txtCode
                frameHeight: '300px',                 //默認值為“300px”
                initWords: '歡迎使用。請輸入文字...',  //默認值為“請輸入...”
                showInfo: true                        //是否顯示“關於”菜單，默認顯示
            });
        });
</script>

定義一個div、一個textarea，然后運行$('#divEditor').wangEditor({...})就可以。

因為wangEditor是基於bootstrap和jquery。所以要引用對應的文件。（當中，font-awesome.min.css是bootstrap的圖標庫，里面包括豐富的圖標，不了解的搜一下。很easy）

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="Font-Awesome-3.2.1/css/font-awesome.min.css" rel="stylesheet" />

<script src="javascript/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

就這兩步。頁面中就能夠呈現出wangEditor編輯界面。編輯內容的源碼在textarea中，通過js獲取就可以。

04. 怎樣應對低版本號瀏覽器？

眾所周知。bootstrap是不支持IE低版本號瀏覽器的，可是萬一遇到低版本號瀏覽器該怎么辦？我的原則就是四個字——至少能用！

於是我相處一個比較巧妙的解決方式：針對IE8下面瀏覽器，部提供富文本編輯功能，僅僅顯示一個輸入框，而且給出提示。

如圖：

盡管bootstrap不支持IE8下面瀏覽器，可是我也不能讓用戶看到亂碼、無法操作。我給用戶呈現什么。用戶就一定能操作什么。

05. 繼續升級

我會繼續為wangEditor升級。第一，我會參考bootstrap-wysiwyg優化、精簡代碼；第二，我想增加一個代碼編輯器的功能。

事實上如今我已經做了一部分工作——代碼格式化、以及代碼高亮。還沒有來得及整合到wangEditor中。

盡管js富文本框有非常多，可是帶有代碼編輯、顯示功能的卻沒大有。反正我是沒找到。所以。這個功能加進去之后，應該還能夠算作一個特色。

06. 歡迎增加！

假設你也有興趣和我共同開發、升級、維護這一款wangEditor編輯器，最好還是聯系我（發站內消息就可以）一起合作開發，能夠通過github來協同工作。

事實上接下來的工作還有非常多，比如排查BUG、增加很多其它的功能、支持很多其它瀏覽器，可能還有會面向商用的定制開發工作，到時候能夠掙一點外塊！哈哈。只是這是后話啦。

最后。推薦大家用“Github for windows”來管理自己的源碼，最簡單的方式使用git，免去了繁冗的命令操作，非常贊！

-------------------------------------------------------------------------------------------------------------

歡迎關注我的微博。

也歡迎關注我的教程：

《從設計到模式》《深入理解javascript原型和閉包系列》《微軟petshop4.0源代碼解讀視頻》《json2.js源代碼解讀視頻》

--------------------------------------------------------------------------------------