所見即所得的文本編輯器目前在網(wǎng)上流傳的已經(jīng)有很多了，并且都比較優(yōu)秀，就我個(gè)人而言，用過的有以下幾個(gè)：
· 第一個(gè)接觸的是ewebeditor，用在我的畢業(yè)設(shè)計(jì)里面，那時(shí)候是順便選的，對(duì)這類東西也沒什么了解，現(xiàn)在這個(gè)編輯器已經(jīng)相當(dāng)猛了；
· 后來工作中用了FCKEdier，原因很簡單，這個(gè)文本編輯器已經(jīng)有相應(yīng)的asp.net服務(wù)器端控件，封裝得很棒，不過畢竟是封裝好了的控件，存在著一定的局限，而且目前這個(gè)文本編輯器已經(jīng)全面改版，并且現(xiàn)在的名字叫CKEdier，現(xiàn)在所在公司的項(xiàng)目也是用這個(gè)的，原因一樣，有封裝、夠強(qiáng)大；不過這兩個(gè)文本編輯器我個(gè)人都不喜歡，原因說不出，可能是太大型了，對(duì)于太大型的東西我一般沒有愛；
· 在前一家公司的時(shí)候帶過兩個(gè)項(xiàng)目，在項(xiàng)目里面使用了KindEditor，這個(gè)是在zcool上面看到的，相當(dāng)小巧美觀，插件接口也做得很好，當(dāng)時(shí)的項(xiàng)目是用ASP.NET MVC，所以對(duì)那些服務(wù)器端的控件已經(jīng)沒什么在意，并且是自己帶的項(xiàng)目，必然想做一些屬于自己的嘗試，得出的結(jié)論是這是一個(gè)很好的文本編輯器，和她的名字一樣和藹可親。
· 忘記在那里看到xheditor了，是一個(gè)新出的所見即所得文本編輯器，感覺比kindediter還要小巧，基于jquery開發(fā)的，但是常用的功能都有了，而且插件接口相當(dāng)優(yōu)秀（可能其他的更優(yōu)秀但是我不了解^^），API文檔也做得很好，基本不需要怎么思考就能看得懂，提供的幾套皮膚也做得很好很簡潔，很好和界面搭配，作為一種嘗試我拿來用在自己的這個(gè)博客的后臺(tái)。之前用的是1.0的版本，發(fā)現(xiàn)在chrome1.7+版本中出現(xiàn)了上傳不了文件的BUG，昨天在一個(gè)群里有人在詢問這個(gè)文本編輯起的插件怎么弄，給人解答后自己也去官網(wǎng)看了，發(fā)現(xiàn)有更新了，并且已經(jīng)修復(fù)了這個(gè)BUG（上傳的的圖片文件名是中文的好像還是有點(diǎn)問題...），之前不是很在意的BUG也修復(fù)了，于是也做了果斷更新（本來有在考慮要不要換kindediter，現(xiàn)在看來不用了）。
關(guān)于xheditor：
官方首頁：http://xheditor.com/
demo演示：http://xheditor.com/demo
api文檔：http://xheditor.com/manual
PS：使用這個(gè)編輯器，結(jié)合另外一個(gè)組件SyntaxHighlighter（一個(gè)用于高亮顯示代碼文本的js組件）我做了一個(gè)簡單的插件，就是可以在文本編輯起里面插入一段代碼，然后對(duì)代碼進(jìn)行高亮顯示。說白了就是輸入字符串然后對(duì)字符串進(jìn)行必要的修改然后插入到文本編輯器中光標(biāo)所在的位置- -！，利用xheditor提供的插件接口，三兩下就可以搞定鳥，插件的代碼如下：
1、首先定義插件樣式，具體來說就是定義一個(gè)CSS類，代碼大致如下：
定義插件樣式的css代碼
復(fù)制代碼 代碼如下:
style type="text/css">
.coderPlugin {BR> /* 定義插件按鈕的圖片，自己找個(gè)就是了 */
background:transparent url(../../Images/scriptCode.png) no-repeat 16px 16px;
background-position:2px 2px;
}
/style>
2、然后是定義插件，先確定插件的名稱（這里取名為higlighe），然后定義這個(gè)創(chuàng)建相關(guān)的參數(shù)（具體查看xheditor的api文檔），其中有個(gè)名稱為c的參數(shù)，是指插件的CssClass，上面定義的那個(gè)class在這里就用到了，名字為e的參數(shù)是重點(diǎn)所在，實(shí)現(xiàn)了插件的邏輯，在里面經(jīng)常會(huì)需要調(diào)用到xheditor的api，所以邊寫邊查就是了，代碼大致如下：
定義插件的javascript代碼
復(fù)制代碼 代碼如下:
// 文本編輯器的自定義插件
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>請(qǐng)輸入代碼/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、使用自定義插件，這里只要對(duì)xheditor的一個(gè)參數(shù)進(jìn)行賦值，把我們定義好的插件賦過去就OK了，代碼大致如下（這里只列出調(diào)用插件的參數(shù)，一般不會(huì)只設(shè)置這個(gè)參數(shù)的，會(huì)設(shè)置文件上傳相關(guān)的參數(shù)）：
調(diào)用自定義插件的javascript代碼
復(fù)制代碼 代碼如下:
$("#yourTextarea").xheditor({
plugins: coderPlugin
});
4、完了，使用起來大致效果如下：
畢竟是個(gè)比較年輕的文本編輯器，不過個(gè)人比較喜歡的是基于jquery開發(fā)這一點(diǎn)（可能有不少人不喜歡這一點(diǎn)），期待該組件不斷完善！
您可能感興趣的文章:- 自己寫的兼容ie和ff的在線文本編輯器類似ewebeditor
- ajax php實(shí)現(xiàn)給fckeditor文本編輯器增加圖片刪除功能
- .NET下為百度文本編輯器UEditor增加圖片刪除功能示例
- ASP.NET網(wǎng)站使用Kindeditor富文本編輯器配置步驟
- Django集成百度富文本編輯器uEditor攻略
- ThinkPHP中使用Ueditor富文本編輯器
- jQuery 移動(dòng)端artEditor富文本編輯器
