在xheditor编辑器的WYSWYG编辑模式下增加插入代码功能
xhEditor HTML编辑器为国人所开发，是一个基于jQuery开发的简单迷你并且高效的可视化XHTML编辑器，基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+。
经过实际使用，取代FCKeditor/CKeditor或其它HTML编辑器是没有任何问题的。
xhEditor编辑器官方网站：http://xheditor.com/
Features(特点)：
* Small：初始加载4个文件，包括：1个js(50k)+2个css(10k)+1个图片(5k)，总共 65k。若js和css文件进行gzip压缩传输，可以进一步缩减为24k左右。加上jQuery的24K，总共仅加载48K。
* Fast：基于jQuery引擎开发，提供高效的代码执行效率。
* Simple：简单的调用方式，加一个class属性就能将您的textarea立马变成一个功能丰富的可视化编辑器。
* Upload：内置Ajax上传和HTML5上传支持(多文件上传、真实上传进度及文件拖放上传)，追求完美的用户上传体验。
* Word：实现Word代码自动检测并清理，提供高效完美的Word代码过滤方案，生成代码最优化精简，但是却不丢失任何细节效果。
* UBB：提供完美的UBB可视化编辑解决方案，在您获得安全高效代码存储的同时，又能享受可视化编辑的便捷。
演示实例：
* 默认模式：http://xheditor.com/demos/demo01.html
* 自定义按钮：http://xheditor.com/demos/demo02.html
* 皮肤选择：http://xheditor.com/demos/demo03.html
* 其它选项：http://xheditor.com/demos/demo04.html
* Javascript交互：http://xheditor.com/demos/demo05.html
* 非utf-8 编码网页调用：http://xheditor.com/demos/demo06.html
* UBB可视化编辑：http://xheditor.com/demos/demo07.html
* Ajax文件上传：http://xheditor.com/demos/demo08.html
* 插件扩展：http://xheditor.com/demos/demo09.html
* iframe 调用文件上传：http://xheditor.com/demos/demo10.html
* 异步加载：http://xheditor.com/demos/demo11.html
下载网址：http://code.google.com/p/xheditor/downloads/list
使用帮助：http://code.google.com/p/xheditor/wiki/Help
xhEidtor的最新版本为v1.0.0 RC3 (build 100506)，功能及稳定性已能满足日常使用需要，但插入代码功能只在UBB编辑模式下提供，在所见即所得模式下却没有，令人觉得有些少遗憾及使用上的不便。
为了弥补遗憾，本人决定增加所见即所得编辑模式下的代码插入功能。其实现过程如下：
首先，下载xhEditor最新代码，解压到合适目录下。
然后在编辑器模板文件里增加下面代码。如下所示：
<head>
<!-- // 引入 jQuery 框架文件 -->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="xheditor/xheditor-zh-cn.min.js"></script>
<style type="text/css">
<!--
/* 增加插入代码工具图标 */
.btnCode {
background:transparent url(syntaxhighlighter/styles/code.gif) no-repeat 20px 20px;
background-position:3px 3px;
}
-->
</style>
<script type="text/javascript">
$(function() {
var ssid = $("#ssid").val();
// 创建xhEditor编辑器
/*
// v1.0.0 RC2以前版本使用
var tools = "GStart,Cut,Copy,Paste,Pastetext,GEnd,Separator,";
tools += "GStart,Blocktag,Fontface,FontSize,Bold,Italic,Underline,Strikethrough,FontColor,BackColor,Removeformat,GEnd,Separator,";
tools += "GStart,Align,List,Outdent,Indent,GEnd,Separator,";
tools += "GStart,Link,Unlink,Img,Table,Code,GEnd,Separator,";
tools += "GStart,Source,Fullscreen,About,GEnd";
*/
// v1.0.0 RC3版本使用
var tools = "Cut,Copy,Paste,Pastetext,Separator,";
tools += "Blocktag,Fontface,FontSize,Bold,Italic,Underline,Strikethrough,FontColor,BackColor,SelectAll,Removeformat,Separator,";
tools += "Align,List,Outdent,Indent,Separator,";
tools += "Link,Unlink,Img,Table,Code,Separator,";
tools += "Source,Fullscreen,About";
$("#editor").xheditor({
tools:tools,
width:'100%',
height:'400',
skin:'default', //default(默认风格),o2007blue(Office 2007 蓝色),o2007silver(Office 2007 银色)
//forcePtag:false, //强制P标签(true)
hoverExecDelay:3000,
layerShadow:2,
upLinkUrl:"{{ url controller='Article' action='FileUpload' }}" + '&ssid=' + ssid,
upLinkExt:'zip,rar,txt,doc,xls,chm,pdf',
upImgUrl:"{{ url controller='Article' action='ImgUpload' }}" + '&ssid=' + ssid,
//emots:{qq:{name:'QQ',count:55,width:25,height:25,line:11},msn:{name:'MSN',count:40,width:22,height:22,line:8}} //自定义表情
plugins:{
Code:{
c:'btnCode',t:'插入代码',h:1,e:function(){
var _this=this;
var htmlCode='<div><select id="xheCodeType"><option value="html">HTML/XML</option><option value="javascript">JavaScript</option><option value="css">CSS</option><option value="php">PHP</option><option value="csharp">C#</option><option value="cpp">C++</option><option value="java">Java</option><option value="perl">Perl</option><option value="python">Python</option><option value="ruby">Ruby</option><option value="vb">Visual Basic</option><option value="delphi">Delphi</option><option value="as3">Action Script 3</option><option value="sql">SQL</option><option value="plain">其它</option></select></div><div><textarea id="xheCodeValue" wrap="soft" spellcheck="false" style="width:300px;height:100px;" /></div><div style="text-align:right;"><input type="button" id="xheSave" value="确定" /></div>';
var jCode=$(htmlCode),jType=$('#xheCodeType',jCode),jValue=$('#xheCodeValue',jCode),jSave=$('#xheSave',jCode);
jSave.click(function(){
_this.loadBookmark();
_this.pasteText('<pre class="brush: '+jType.val()+';">\r\n'+jValue.val()+'\r\n</pre>');
_this.hidePanel();
return false;
});
_this.showDialog(jCode);
}
}
}
});
});
</script>
</head>
<body>
......
<textarea name="editor" id="editor" />{{$art.content}}</textarea>
......
</body>
xhEditor编辑界面效果图：
其次，后台保存数据时，预先将数据预处理，以确保“<pre>”不被编码成“<pre>”。否则，无法正确显示高亮代码。代码如下：
// 确保“<pre>”不被编码成“<pre>” $data['content'] = html_entity_decode($_POST['editor']);
最后，下载syntaxhighlighter代码高亮处理代码（下载地址：http://alexgorbatchev.com/wiki/SyntaxHighlighter:Download ），解压缩到合适目录下。
然后在代码浏览页面模板上增加下面代码。如下所示：
<head>
<!-- // 引入 jQuery 框架文件 -->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushBash.js"></script>
<!--
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushDelphi.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushDiff.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushGroovy.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJava.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushRuby.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushVb.js"></script>
-->
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushPython.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushScala.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushSql.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushPerl.js"></script>
<link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemeDefault.css"/>
<script type="text/javascript">
$(function(){
SyntaxHighlighter.config.clipboardSwf = '../libs/syntaxhighlighter/scripts/clipboard.swf';
SyntaxHighlighter.config.strings = {
expandSource: '展开代码',
viewSource: '查看代码',
copyToClipboard: '复制代码',
copyToClipboardConfirmation: '代码复制成功',
print: '打印',
help: '帮助',
//alert: '语法高亮\n\n',
noBrush: '没有找到刷子：',
brushNotHtmlScript: '没有为html-script选项配置刷子：',
aboutDialog: '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>About SyntaxHighlighter</title></head><body style="font-family:Geneva,Arial,Helvetica,sans-serif;background-color:#fff;color:#000;font-size:1em;text-align:center;"><div style="text-align:center;margin-top:3em;"><div style="font-size:xx-large;">SyntaxHighlighter</div><div style="font-size:.75em;margin-bottom:4em;"><div>version 2.1.364 (October 15 2009)</div><div><a href="http://alexgorbatchev.com" target="_blank" style="color:#0099FF;text-decoration:none;">http://alexgorbatchev.com</a></div><div>If you like this script, please <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=2930402" style="color:#0099FF;text-decoration:none;">donate</a> to keep development active!</div></div><div>JavaScript code syntax highlighter.</div><div>Copyright 2004-2009 Alex Gorbatchev.</div></div></body></html>'
}
//SyntaxHighlighter.config.tagName = 'pre';
SyntaxHighlighter.config.bloggerMode = true; // 去掉代码行尾的<br>标识，并准确换行。
//SyntaxHighlighter.config.stripBrs = false;
SyntaxHighlighter.all();
});
</script>
</head>
代码高亮效果图：
论坛帖：http://qeephp.com/bbs/viewthread.php?tid=10990&page=1&extra=#pid56781