所見即所得的文本編輯器目前在網上流傳的已經有很多了，并且都比較優秀，就我個人而言，用過的有以下幾個：
· 第一個接觸的是ewebeditor，用在我的畢業設計里面，那時候是順便選的，對這類東西也沒什么了解，現在這個編輯器已經相當猛了；
· 后來工作中用了FCKEdier，原因很簡單，這個文本編輯器已經有相應的asp.net服務器端控件，封裝得很棒，不過畢竟是封裝好了的控件，存在著一定的局限，而且目前這個文本編輯器已經全面改版，并且現在的名字叫CKEdier，現在所在公司的項目也是用這個的，原因一樣，有封裝、夠強大；不過這兩個文本編輯器我個人都不喜歡，原因說不出，可能是太大型了，對于太大型的東西我一般沒有愛；
· 在前一家公司的時候帶過兩個項目，在項目里面使用了KindEditor，這個是在zcool上面看到的，相當小巧美觀，插件接口也做得很好，當時的項目是用ASP.NET MVC，所以對那些服務器端的控件已經沒什么在意，并且是自己帶的項目，必然想做一些屬于自己的嘗試，得出的結論是這是一個很好的文本編輯器，和她的名字一樣和藹可親。
· 忘記在那里看到xheditor了，是一個新出的所見即所得文本編輯器，感覺比kindediter還要小巧，基于jquery開發的，但是常用的功能都有了，而且插件接口相當優秀（可能其他的更優秀但是我不了解^^），API文檔也做得很好，基本不需要怎么思考就能看得懂，提供的幾套皮膚也做得很好很簡潔，很好和界面搭配，作為一種嘗試我拿來用在自己的這個博客的后臺。之前用的是1.0的版本，發現在chrome1.7+版本中出現了上傳不了文件的BUG，昨天在一個群里有人在詢問這個文本編輯起的插件怎么弄，給人解答后自己也去官網看了，發現有更新了，并且已經修復了這個BUG（上傳的的圖片文件名是中文的好像還是有點問題...），之前不是很在意的BUG也修復了，于是也做了果斷更新（本來有在考慮要不要換kindediter，現在看來不用了）。
關于xheditor：
官方首頁：http://xheditor.com/
demo演示：http://xheditor.com/demo
api文檔：http://xheditor.com/manual
PS：使用這個編輯器，結合另外一個組件SyntaxHighlighter（一個用于高亮顯示代碼文本的js組件）我做了一個簡單的插件，就是可以在文本編輯起里面插入一段代碼，然后對代碼進行高亮顯示。說白了就是輸入字符串然后對字符串進行必要的修改然后插入到文本編輯器中光標所在的位置- -！，利用xheditor提供的插件接口，三兩下就可以搞定鳥，插件的代碼如下：
1、首先定義插件樣式，具體來說就是定義一個CSS類，代碼大致如下：
定義插件樣式的css代碼
復制代碼 代碼如下:
style type="text/css">
.coderPlugin {BR> /* 定義插件按鈕的圖片，自己找個就是了 */
background:transparent url(../../Images/scriptCode.png) no-repeat 16px 16px;
background-position:2px 2px;
}
/style>
2、然后是定義插件，先確定插件的名稱（這里取名為higlighe），然后定義這個創建相關的參數（具體查看xheditor的api文檔），其中有個名稱為c的參數，是指插件的CssClass，上面定義的那個class在這里就用到了，名字為e的參數是重點所在，實現了插件的邏輯，在里面經常會需要調用到xheditor的api，所以邊寫邊查就是了，代碼大致如下：
定義插件的javascript代碼
復制代碼 代碼如下:
// 文本編輯器的自定義插件
var coderPlugin = {
highlight: {
c: 'coderPlugin',
t: '插入代碼',
s: null,
h: 1,
e: function () {
var _this = this;
var selectHtml = "select id='xheCodeLanguages'>";
selectHtml += "option value='c#'>C#/option>";
selectHtml += "option value='javascript'>JS/option>";
selectHtml += "option value='css'>CSS/option>";
selectHtml += "option value='sql'>SQL/option>";
selectHtml += "option value='html'>HTML/option>";
selectHtml += "option value='xml'>XML/option>";
selectHtml += "/select>";
var jTest = $('div>b>請輸入代碼/b>' + selectHtml + '/div>div>textarea id="xheTestInput" style="width:480px;height:320px;">/textarea>/div>div style="text-align:right;">input type="button" id="xheSave" value="確 定" />/div>');
var jTestInput = $('#xheTestInput', jTest), jSave = $('#xheSave', jTest);
jSave.click(function () {
var inputCode = jTestInput.val();
inputCode = "div style='border:solid #ccc 1px;width:98%;overflow:auto;'>"
+ "div style='background-color:#ddd; border-bottom:solid 1px #ccc; line-height:1.5em; text-indent:0.5em;'>" + $("#xheCodeLanguages").val() + "代碼/div>"
+ "pre class='brush: " + $("#xheCodeLanguages").val() + "' >"
+ inputCode.replace(//g, "").replace(/>/g, ">")
+ "/pre>"
+ "/div>";
_this.loadBookmark();
_this.pasteHTML(inputCode);
_this.hidePanel();
return false;
});
_this.showDialog(jTest);
}
}
};
3、使用自定義插件，這里只要對xheditor的一個參數進行賦值，把我們定義好的插件賦過去就OK了，代碼大致如下（這里只列出調用插件的參數，一般不會只設置這個參數的，會設置文件上傳相關的參數）：
調用自定義插件的javascript代碼
復制代碼 代碼如下:
$("#yourTextarea").xheditor({
plugins: coderPlugin
});
4、完了，使用起來大致效果如下：
畢竟是個比較年輕的文本編輯器，不過個人比較喜歡的是基于jquery開發這一點（可能有不少人不喜歡這一點），期待該組件不斷完善！
您可能感興趣的文章:- 自己寫的兼容ie和ff的在線文本編輯器類似ewebeditor
- ajax php實現給fckeditor文本編輯器增加圖片刪除功能
- .NET下為百度文本編輯器UEditor增加圖片刪除功能示例
- ASP.NET網站使用Kindeditor富文本編輯器配置步驟
- Django集成百度富文本編輯器uEditor攻略
- ThinkPHP中使用Ueditor富文本編輯器
- jQuery 移動端artEditor富文本編輯器
