在xheditor编辑器的WYSWYG编辑模式下增加插入代码功能

hegz

浏览: 442781 次
性别:
来自: 茂名

最近访客更多访客>>

u012363178

zhangze6000

corn8888

咕咕鸡呜呜

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

FleaPHP

浏览器 JavaScript jQuery CSS Office

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>”不被编码成“&lt;pre&gt;”
$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>

代码高亮效果图：