使用prettify为编辑器xhEditor添加代码（code）高亮显示

最新推荐文章于 2022-11-09 16:17:12 发布

huangwenhua5000

最新推荐文章于 2022-11-09 16:17:12 发布

阅读量1.2k

点赞数

分类专栏： ASP.NET技术

ASP.NET技术专栏收录该内容

167 篇文章 0 订阅

订阅专栏

一、下载插件：

xheditor:可到http://xheditor.com/下载

prettify:可到http://code.google.com/p/google-code-prettify/下载

xheditor是一款小巧的html编辑器，采用的是Jquery技术,相信很多人都用过。

prettify是Google开发的一款轻量级的代码高亮显示插件，这款插件比起常用的SyntaxHighlighter来，要小巧得多。它的原理就是将代码放到一个pre块里面，然后对pre块里面的内容进行高亮显示。

二、加载插件。

如果编辑器和显示内容是在同一个网页，那么需要加载js文件和css文件。

   
   <script type="text/javascript" src="jquery/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="xheditor/xheditor-1.1.6-zh-cn.min.js"></script> 
<script type="text/javascript" src="xheditor/prettify/prettify.js"></script> 
<link href="xheditor/prettify/prettify.css" rel="stylesheet" type="text/css" />

前两行用于编辑器，后两行用于显示高亮代码。如果发表文章和显示文章分属两个页面，可分开加载。

三、修改编辑器

把xheditor下载解压后，可放到网站根目录文件夹xheditor里面，prettify下载解压后可放在文件夹xheditor里面，注意路径问题。

1、制作一个图标。

可用制图工具做一个gif的小图标，放到prettify文件夹下面。

然后写一个CSS引入：

   
   .btnCode  
     { 
    background:transparent url(xheditor/prettify/code.gif) no-repeat 16px 16px; 
    background-position:2px 2px; 
    }

2、为多行文本框加载xheditor编辑器。

在有多行文本框的页面，加上一段js代码：

   
   <script type="text/javascript">  
var editor; 
$(pageInit); 
function pageInit() 
{ 
    var allPlugin={ 
         
        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="js">Javascript</option><option value="css">CSS</option><option value="php">PHP</option><option value="java">Java</option><option value="py">Python</option><option value="pl">Perl</option><option value="rb">Ruby</option><option value="cs">C#</option><option value="c">C++/C</option><option value="vb">VB/ASP</option><option value="">其它</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.pasteHTML('<pre class="prettyprint lang-'+jType.val()+'">'+_this.domEncode(jValue.val())+'</pre>'); 
                _this.hidePanel(); 
                return false;     
            }); 
            _this.showDialog(jCode); 
        }} 
    }; 
    editor=$('#txtTopic').xheditor({plugins:allPlugin,tools:'Fontface,FontSize,Bold,Italic,Underline,Removeformat,Source,Code'}); 
} 
</script>

其中tools:'Fontface,FontSize,Bold,Italic,Underline,Removeformat,Source,Code'这个地方用于显示的图标工具，可随意设定。txtTopic为多行文本框的id.

3、显示代码

在显示页的body标记里面加上οnlοad='prettyPrint()'
即

   
   <body onload="prettyPrint()">

huangwenhua5000

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用prettify为编辑器xhEditor添加代码（code）高亮显示

一、下载插件：xheditor:可到http://xheditor.com/下载prettify:可到http://code.google.com/p/google-code-prettify/下载xheditor是一款小巧的html编辑器，采用的是Jquery技术,相信很多人都用过。prettify是Google开发的一款轻量级的代码高亮显示插件，这款插件比起常用的SyntaxH
复制链接

扫一扫