xheditor所见即所得文本编辑器(代码高亮显示修改)

目前市面上流传的所见即所得编辑器已经不少了，而且各有千秋。下面聊聊几个有代表性的。 · 第一个接触的是 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 = ""; selectHtml += "C#"; selectHtml += "JS"; selectHtml += "CSS"; selectHtml += "SQL"; selectHtml += "HTML"; selectHtml += "XML"; selectHtml += ""; var jTest = $(''); 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. 大功告成，使用效果大致如下： 毕竟是个相对年轻的文本编辑器，不过个人比较喜欢它基于 jQuery 开发这一点（可能有人不喜欢）。期待这个组件不断完善。