**关于 xheditor：**
官方首页：http://xheditor.com/
demo 演示：http://xheditor.com/demo
API 文档：http://xheditor.com/manual
结合 xheditor 和另一个组件 SyntaxHighlighter（一个用于高亮代码文本的 JS 组件），可以做一个简单的插件：在编辑器中插入一段代码，然后高亮显示。说白了就是输入字符串，对字符串做必要修改，再插入到光标位置。利用 xheditor 提供的插件接口，三两下就能搞定。插件的代码大致如下：
1. 首先定义插件样式，具体来说就是定义一个 CSS 类，代码大致如下：
定义插件样式的 css 代码
复制代码 代码如下:
```
```
2. 然后定义插件，先确定插件名称（这里取名为 highlight），然后定义创建相关参数（具体查看 xheditor 的 API 文档）。其中参数 `c` 是指插件的 CssClass，上面定义的 class 在这里用上了；参数 `e` 是重点，实现了插件的逻辑，里面经常需要调用 xheditor 的 API，边写边查就行。代码大致如下：
定义插件的 ja vascript 代码
复制代码 代码如下:
```
// 文本编辑器的自定义插件
var coderPlugin = {
highlight: {
c: 'coderPlugin',
t: '插入代码',
s: null,
h: 1,
e: function () {
var _this = this;
var selectHtml = "";
var jTest = $('请输入代码' + selectHtml + '
');
var jTestInput = $('#xheTestInput', jTest), jSa ve = $('#xheSa ve', jTest);
jSa ve.click(function () {
var inputCode = jTestInput.val();
inputCode = ""
+ "
";
_this.loadBookmark();
_this.pasteHTML(inputCode);
_this.hidePanel();
return false;
});
_this.showDialog(jTest);
}
}
};
```
3. 使用自定义插件，只要对 xheditor 的一个参数赋值，把定义好的插件传过去即可。代码大致如下（这里只列出调用插件的参数，一般还会设置文件上传相关参数）：
调用自定义插件的 ja vascript 代码
复制代码 代码如下:
```
$("#yourTextarea").xheditor({
plugins: coderPlugin
});
```
4. 大功告成，使用效果大致如下：
" + $("#xheCodeLanguages").val() + "代码
"
+ ""
+ inputCode.replace(//g, ">")
+ ""
+ "
毕竟是个相对年轻的文本编辑器，不过个人比较喜欢它基于 jQuery 开发这一点（可能有人不喜欢）。期待这个组件不断完善。 
