xheditor所见即所得文本编辑器(代码高亮显示修改)
作者:SunnyJourney
时间:2026-07-22
浏览:7
xheditor是一款基于jQuery的轻量级所见即所得编辑器,功能齐全且插件接口优秀,API文档清晰易用。可结合SyntaxHighlighter组件,通过自定义插件便捷实现代码编辑与高亮显示功能,提升了后台文本编辑体验。
本文目录
**关于 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 开发这一点(可能有人不喜欢)。期待这个组件不断完善。
作者最新文章
免注册Word转PDF在哪里?Word转PDF手机电脑都能用
2026-11-08 15:29
xshell如何使用密钥连接服务器
2026-11-05 21:38
动漫共和国资源入口及正版地址分享
2026-11-04 12:05
xshell端口ssh SSH隧道建立方法
2026-11-03 10:11
CorelDRAW是免费软件吗?详解试用、订阅与一次性购买收费模式
2026-10-30 19:32
热门文章
更多
精品专题
更多
Mac软件
更多
WINDOWS
更多
































