xheditor所见即所得文本编辑器(代码高亮显示修改)
作者:SunnyJourney
时间:2026-07-22
浏览:0
xheditor是一款基于jQuery的轻量级所见即所得编辑器,功能齐全且插件接口优秀,API文档清晰易用。可结合SyntaxHighlighter组件,通过自定义插件便捷实现代码编辑与高亮显示功能,提升了后台文本编辑体验。
目前市面上流传的所见即所得编辑器已经不少了,而且各有千秋。下面聊聊几个有代表性的。
· 第一个接触的是 ewebeditor,当时用在我的毕业设计里,算是顺手选的,对这类工具也没什么了解。现在回头再看,这个编辑器已经发展得相当成熟了。
· 后来工作中用了 FCKEditor,原因很简单——它当时已经有现成的 ASP.NET 服务器端控件,封装得很棒。不过封装好的控件也有局限,而且这个编辑器后来全面改版,改名叫 CKEditor 了。现在所在公司的项目也在用 CKEditor,原因一样:有封装、够强大。但说实话,这两个编辑器我个人都不太感冒,可能是太“重型”了,对过于庞大的东西天生没什么好感。
· 在前一家公司带过两个项目,项目里用了 KindEditor。这是在 zcool 上看到的,小巧美观,插件接口也做得很好。当时项目用 ASP.NET MVC,服务器端控件已经不太在意了,而且自己带的项目,总想尝试点不一样的东西。结论是,这确实是个好编辑器,和它的名字一样和蔼可亲。
· 已经不记得在哪里看到 xheditor 了,一个相对较新的所见即所得编辑器。感觉比 KindEditor 还要小巧,基于 jQuery 开发,但常用功能一应俱全,插件接口相当优秀(当然可能别的更优秀,但我了解有限),API 文档也做得很好,基本不需要费脑子就能看懂。提供的几套皮肤简洁易搭,很适合与界面配合。作为一种尝试,我把它用在了自己博客的后台。之前用的是 1.0 版本,后来发现 Chrome 1.7+ 版本下上传文件有 Bug。昨天在一个群里帮人解答插件问题,顺便去官网一看,发现已经更新了,这个 Bug 也修复了(不过上传中文文件名的图片好像还有点问题)。之前没太在意的 Bug 也修复了,于是果断更新(本来还在犹豫要不要换回 KindEditor,现在看来不用了)。
**关于 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 = $('
毕竟是个相对年轻的文本编辑器,不过个人比较喜欢它基于 jQuery 开发这一点(可能有人不喜欢)。期待这个组件不断完善。
本文内容来源于网友投稿,如有侵权请联系删除。
**关于 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 开发这一点(可能有人不喜欢)。期待这个组件不断完善。
作者最新文章
SQL中ROUND函数对0.5的处理机制及强制四舍五入方法
2026-09-15 14:19
JS金额计算怎么避免四舍五入误差
2026-09-14 17:32
韩国8月携号转网数据:Galaxy Z8系列iPhone用户转化率约为Z7系列2倍
2026-09-08 17:02
AE基础教程:如何创建合成并制作关键帧动画
2026-09-04 09:27
如何去除PDF打开密码及解密后的文件检查
2026-09-03 11:08
精品专题
更多
Mac软件
更多
WINDOWS
更多

































