xheditor所見即所得文本編輯器(代碼高亮顯示修改)
更新時(shí)間：2010年12月28日 12:33:37 作者：
之前有朋友在問我用什么web文本編輯器，我給他介紹了好幾個(gè)，最后他問我博客是用哪個(gè)，我的回答是xheditor~
所見即所得的文本編輯器目前在網(wǎng)上流傳的已經(jīng)有很多了，并且都比較優(yōu)秀，就我個(gè)人而言，用過的有以下幾個(gè)：
· 第一個(gè)接觸的是ewebeditor，用在我的畢業(yè)設(shè)計(jì)里面，那時(shí)候是順便選的，對這類東西也沒什么了解，現(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è)人都不喜歡，原因說不出，可能是太大型了，對于太大型的東西我一般沒有愛；
· 在前一家公司的時(shí)候帶過兩個(gè)項(xiàng)目，在項(xiàng)目里面使用了KindEditor，這個(gè)是在zcool上面看到的，相當(dāng)小巧美觀，插件接口也做得很好，當(dāng)時(shí)的項(xiàng)目是用ASP.NET MVC，所以對那些服務(wù)器端的控件已經(jīng)沒什么在意，并且是自己帶的項(xiàng)目，必然想做一些屬于自己的嘗試，得出的結(jié)論是這是一個(gè)很好的文本編輯器，和她的名字一樣和藹可親。
· 忘記在那里看到xheditor了，是一個(gè)新出的所見即所得文本編輯器，感覺比kindediter還要小巧，基于jquery開發(fā)的，但是常用的功能都有了，而且插件接口相當(dāng)優(yōu)秀（可能其他的更優(yōu)秀但是我不了解^^），API文檔也做得很好，基本不需要怎么思考就能看得懂，提供的幾套皮膚也做得很好很簡潔，很好和界面搭配，作為一種嘗試我拿來用在自己的這個(gè)博客的后臺。之前用的是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è)簡單的插件，就是可以在文本編輯起里面插入一段代碼，然后對代碼進(jìn)行高亮顯示。說白了就是輸入字符串然后對字符串進(jìn)行必要的修改然后插入到文本編輯器中光標(biāo)所在的位置- -！，利用xheditor提供的插件接口，三兩下就可以搞定鳥，插件的代碼如下：
1、首先定義插件樣式，具體來說就是定義一個(gè)CSS類，代碼大致如下：
定義插件樣式的css代碼
<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)常會需要調(diào)用到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的一個(gè)參數(shù)進(jìn)行賦值，把我們定義好的插件賦過去就OK了，代碼大致如下（這里只列出調(diào)用插件的參數(shù)，一般不會只設(shè)置這個(gè)參數(shù)的，會設(shè)置文件上傳相關(guān)的參數(shù)）：
調(diào)用自定義插件的javascript代碼
$("#yourTextarea").xheditor({
plugins: coderPlugin
});
4、完了，使用起來大致效果如下：
畢竟是個(gè)比較年輕的文本編輯器，不過個(gè)人比較喜歡的是基于jquery開發(fā)這一點(diǎn)（可能有不少人不喜歡這一點(diǎn)），期待該組件不斷完善！
· 第一個(gè)接觸的是ewebeditor，用在我的畢業(yè)設(shè)計(jì)里面，那時(shí)候是順便選的，對這類東西也沒什么了解，現(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è)人都不喜歡，原因說不出，可能是太大型了，對于太大型的東西我一般沒有愛；
· 在前一家公司的時(shí)候帶過兩個(gè)項(xiàng)目，在項(xiàng)目里面使用了KindEditor，這個(gè)是在zcool上面看到的，相當(dāng)小巧美觀，插件接口也做得很好，當(dāng)時(shí)的項(xiàng)目是用ASP.NET MVC，所以對那些服務(wù)器端的控件已經(jīng)沒什么在意，并且是自己帶的項(xiàng)目，必然想做一些屬于自己的嘗試，得出的結(jié)論是這是一個(gè)很好的文本編輯器，和她的名字一樣和藹可親。
· 忘記在那里看到xheditor了，是一個(gè)新出的所見即所得文本編輯器，感覺比kindediter還要小巧，基于jquery開發(fā)的，但是常用的功能都有了，而且插件接口相當(dāng)優(yōu)秀（可能其他的更優(yōu)秀但是我不了解^^），API文檔也做得很好，基本不需要怎么思考就能看得懂，提供的幾套皮膚也做得很好很簡潔，很好和界面搭配，作為一種嘗試我拿來用在自己的這個(gè)博客的后臺。之前用的是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è)簡單的插件，就是可以在文本編輯起里面插入一段代碼，然后對代碼進(jìn)行高亮顯示。說白了就是輸入字符串然后對字符串進(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)常會需要調(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>請輸入代碼</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的一個(gè)參數(shù)進(jìn)行賦值，把我們定義好的插件賦過去就OK了，代碼大致如下（這里只列出調(diào)用插件的參數(shù)，一般不會只設(shè)置這個(gè)參數(shù)的，會設(shè)置文件上傳相關(guān)的參數(shù)）：
調(diào)用自定義插件的javascript代碼
復(fù)制代碼 代碼如下:
$("#yourTextarea").xheditor({
plugins: coderPlugin
});
4、完了，使用起來大致效果如下：
畢竟是個(gè)比較年輕的文本編輯器，不過個(gè)人比較喜歡的是基于jquery開發(fā)這一點(diǎn)（可能有不少人不喜歡這一點(diǎn)），期待該組件不斷完善！
相關(guān)文章
關(guān)于CKeditor的非主流個(gè)性應(yīng)用的設(shè)置
因?yàn)槲业木W(wǎng)站需要一個(gè)編輯器，所以用周末時(shí)間研究了一下CKeditor，終于最終修改成了合適的樣子。2009-12-12
很多網(wǎng)站可能都在用FCK的新聞編輯組件，使用FCK的時(shí)候一定要注意版本是否安全，以下是FCK中的文件上傳漏洞：（主要是：connector.aspx文件的漏洞）2009-04-04
首先,FCKEDITOR的性能是非常好的,用戶只需很少的時(shí)間就可以載入FCKEDITOR所需文件.對于其他在線編輯器來 說,這幾乎是個(gè)很難解決的難題2009-05-05
FCKeditor 2.0版終于出來了，之所以用“終于”這個(gè)詞，是因?yàn)樵谶@一版本上加上了眾望所歸的FLASH插入功能。2009-02-02
一個(gè)Javascript 編寫的代碼編輯器...2007-05-05
fckeditor 的基本配置我就不講了，講講圖片上傳這塊吧；2010-01-01
解密FCKeditor 2.0 的設(shè)置.修改.使用方法
解密FCKeditor 2.0 的設(shè)置.修改.使用方法...2007-11-11
FCKeidtor清除編輯器內(nèi)容的代碼，需要的朋友可以參考下。2010-04-04
eWebEditor上傳個(gè)別圖片時(shí)出現(xiàn):請選擇一個(gè)有效的文件,支持的格式有(GIF|JPG|JPEG|BMP|PNG)!，在WINDOWSXP下使用該組件正常,卻在WINDOWS2003上提示2009-11-11
對于操作 fckeditor的朋友，有所幫助。其實(shí)我們用插件的方法制作也是不錯(cuò)的。功能可以更強(qiáng)。2009-06-06