DedeCms5.7代码高亮的实现方法

这篇文章给大家分享的是有关DedeCms 5.7代码高亮的实现方法的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。

DedeCms 5.7代码高亮怎么实现？

无论建博客网站还是CMS类型网站，很多都需要代码高亮，织梦CMS是国内比较优秀的CMS建站系统之一，不像Wordpress一样有大把大把的插件可用，我用的是最新的dedeCMS 5.7，在网上搜了很长时间资料，大都写的是CKEditor和SyntaxHighlighter整合的文章，但是dedecms将ckeditor做了集成，和一般的只针对于ckeditor对config.js修改不同。

所以只能自己琢磨修改了，现将方法写出供站长朋友们参考：

一、首先去SyntaxHighlighter官方网站下载，网址：http://alexgorbatchev.com/SyntaxHighlighter/download/，建议下载2.1版本，3.0版本的貌似不支持自动换行，这里使用的是2.1.382版本。将下载的文件解压在syntaxHighlight文件夹里，去除里面无用的文件，只留下scripts和styles文件夹。

二、新建dialogs文件夹，在里面新建一个名为syntaxhighlight.js的文件，因代码量过大，不宜贴出，请直接下载syntaxhighlight.js

如果想修改代码区域的样式请在以下代码处修改

代码如下:

onOk : function() { 
var i = this.getParentEditor(); 
var h = i.getSelection(); 
var g = h.getStartElement(); 
var l = g && g.getAscendant("pre", true); 
var j = f(); 
this.commitContent(j); 
var k = e(j); 
var m = CKEDITOR.dom.element 
.createFromHtml(&＃39;

&＃39; 
+ c(j.code) +"

三、然后新建images文件夹，存放一个syntaxhighlight.gif图片文件，该图片文件在编辑器工具栏上显示，可以使用16*16像素的图片

四、新建lang文件夹，是语言包，里面有两个文件，一个是中文cn.js一个是英文en.js，代码内容如下：

　en.js代码如下：

代码如下:

CKEDITOR.plugins.setLang(&＃39;syntaxhighlight&＃39;, &＃39;en&＃39;, 
{ 
syntaxhighlight: 
{ 
title: &＃39;Add or update a code snippet&＃39;, 
sourceTab: &＃39;Source code&＃39;, 
langLbl: &＃39;Select language&＃39;, 
advancedTab: &＃39;Advanced&＃39;, 
hideGutter: &＃39;Hide gutter&＃39;, 
hideGutterLbl: &＃39;Hide gutter & line numbers.&＃39;, 
hideControls: &＃39;Hide controls&＃39;, 
hideControlsLbl: &＃39;Hide code controls at the top of the code block.&＃39;, 
collapse: &＃39;Collapse&＃39;, 
collapseLbl: &＃39;Collapse the code block by default. (controls need to be turned on)&＃39;, 
showColumns: &＃39;Show columns&＃39;, 
showColumnsLbl: &＃39;Show row columns in the first line.&＃39;, 
lineWrap: &＃39;Disable line wrapping&＃39;, 
lineWrapLbl: &＃39;Switch off line wrapping.&＃39;, 
lineCount: &＃39;Default line count&＃39;, 
highlight: &＃39;Highlight lines&＃39;, 
highlightLbl: &＃39;Enter a comma seperated lines of lines you want to highlight, eg 3,10,15.&＃39; 
} 
});

cn.js代码如下：

代码如下:

CKEDITOR.plugins.setLang(&＃39;syntaxhighlight&＃39;, &＃39;cn&＃39;, 
{ 
syntaxhighlight: 
{ 
title: &＃39;添加或更新代码&＃39;, 
sourceTab: &＃39;代码&＃39;, 
langLbl: &＃39;选择语言&＃39;, 
advancedTab: &＃39;高级&＃39;, 
hideGutter: &＃39;隐藏分割线&＃39;, 
hideGutterLbl: &＃39;隐藏分割线和行号&＃39;, 
hideControls: &＃39;隐藏工具栏&＃39;, 
hideControlsLbl: &＃39;隐藏浮动工具栏&＃39;, 
collapse: &＃39;代码折叠&＃39;, 
collapseLbl: &＃39;默认折叠代码块 (需要启用工具栏)&＃39;, 
lineWrap: &＃39;自动换行&＃39;, 
lineWrapLbl: &＃39;关闭自动换行&＃39;, 
autoLinks: &＃39;自动链接&＃39;, 
autoLinksLbl: &＃39;不自动转换超链接&＃39;, 
lineCount: &＃39;起始行号&＃39;, 
highlight: &＃39;高亮行号&＃39;, 
highlightLbl: &＃39;输入以逗号分隔的行号, 如 3,10,15.&＃39; 
} 
});

五、新建plugin.js文件，该文件是ckeditor插件必须得文件，里面是对该插件的一些配置，代码如下：

代码如下:

CKEDITOR.plugins.add("syntaxhighlight", { 
requires : [ "dialog" ], 
lang : [ "cn" ], 
init : function(a) { 
var b = "syntaxhighlight"; 
var c = a.addCommand(b, new CKEDITOR.dialogCommand(b)); 
c.modes = { 
wysiwyg : 1, 
source : 1 
}; 
c.canUndo = false; 
a.ui.addButton("Code", { 
label : a.lang.syntaxhighlight.title, 
command : b, 
icon : this.path + "images/syntaxhighlight.gif" 
}); 
CKEDITOR.dialog.add(b, this.path + "dialogs/syntaxhighlight.js") 
} 
});

六、由于dedecms 5.7自己集成了一个dedepage插件，用来添加ckeditor自定义插件，在/include/ckeditor/dedepage文件夹下，打开plugin.js文件在最后面添加：

requires : [&＃39;syntaxhighlight&＃39;]，其中syntaxhighlight为代码高亮插件的文件夹名，添加完之后的代码如下：

[code] 
// Register a plugin named "dedepage". 
(function() 
{ 
CKEDITOR.plugins.add( &＃39;dedepage&＃39;, 
{ 
init : function( editor ) 
{ 
// Register the command. 
editor.addCommand( &＃39;dedepage&＃39;,{ 
exec : function( editor ) 
{ 
// Create the element that represents a print break. 
// alert(&＃39;dedepageCmd!&＃39;); 
editor.insertHtml("
"); 
} 
}); 
// alert(&＃39;dedepage!&＃39;); 
// Register the toolbar button. 
editor.ui.addButton( &＃39;MyPage&＃39;, 
{ 
label : &＃39;插入分页符&＃39;, 
command : &＃39;dedepage&＃39;, 
icon: &＃39;images/dedepage.gif&＃39; 
}); 
// alert(editor.name); 
}, 
requires : [ &＃39;fakeobjects&＃39; ], 
requires : [&＃39;syntaxhighlight&＃39;] 
}); 
})(); 
[/code]

七、修改/include/ckeditor/ckeditor.inc.php文件，在$toolbar[&＃39;Basic&＃39;]数组的最后一行添加元素Code,修改后代码如下：

代码如下:

$toolbar[&＃39;Basic&＃39;] = array( 
array( &＃39;Source&＃39;,&＃39;-&＃39;,&＃39;Templates&＃39;), 
array( &＃39;Cut&＃39;,&＃39;Copy&＃39;,&＃39;Paste&＃39;,&＃39;PasteText&＃39;,&＃39;PasteFromWord&＃39;,&＃39;-&＃39;,&＃39;Print&＃39;), 
array( &＃39;Undo&＃39;,&＃39;Redo&＃39;,&＃39;-&＃39;,&＃39;Find&＃39;,&＃39;Replace&＃39;,&＃39;-&＃39;,&＃39;SelectAll&＃39;,&＃39;RemoveFormat&＃39;), 
array( &＃39;ShowBlocks&＃39;),array(&＃39;Image&＃39;,&＃39;Flash&＃39;),array(&＃39;Maximize&＃39;),&＃39;/&＃39;, 
array( &＃39;Bold&＃39;,&＃39;Italic&＃39;,&＃39;Underline&＃39;,&＃39;Strike&＃39;,&＃39;-&＃39;), 
array( &＃39;NumberedList&＃39;,&＃39;BulletedList&＃39;,&＃39;-&＃39;,&＃39;Outdent&＃39;,&＃39;Indent&＃39;,&＃39;Blockquote&＃39;), 
array( &＃39;JustifyLeft&＃39;,&＃39;JustifyCenter&＃39;,&＃39;JustifyRight&＃39;,&＃39;JustifyBlock&＃39;), 
array( &＃39;Table&＃39;,&＃39;HorizontalRule&＃39;,&＃39;Smiley&＃39;,&＃39;SpecialChar&＃39;), 
array( &＃39;Link&＃39;,&＃39;Unlink&＃39;,&＃39;Anchor&＃39;),&＃39;/&＃39;, 
array( &＃39;Styles&＃39;,&＃39;Format&＃39;,&＃39;Font&＃39;,&＃39;FontSize&＃39;), 
array( &＃39;TextColor&＃39;, &＃39;BGColor&＃39;, &＃39;MyPage&＃39;,&＃39;Code&＃39;) 
);

至此，编辑器的修改已经完成，修改后的syntaxhighlight文件夹文件目录结构图如下图：

　　将syntaxhighlight文件夹上传到/include/ckeditor/plugins/文件夹下，打开后台，添加文章试一下，看看编辑器的上最后一行是否出现了如图所示的按钮：

　　点击按钮弹出如下图所示的对话框输入代码，并且可以切换到高级选项对代码高亮显示做一些配置：

八、但是光这些还不够，还要在文章模板文件/templets/default/article_article.htm文件里引入高亮显示的笔刷JS文件和CSS文件，由于是需要引入很多JS，所以建议将引入的代码放在标签之前，等待前面的网页加载完后加载，进行显示。

代码如下:

最后发表并生成的文章页面效果图如下：

　　当然，该整合也有点缺点，就是在html页面页面中可能会引入大量的JS文件，加载起来可能会比较慢，另外可拓展性不强，我也会不定期优化该插件，也希望各位网友能提出意见。

感谢各位的阅读！关于DedeCms 5.7代码高亮的实现方法就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！

黑仔小阿哥-炫

这个家伙很懒，什么也没留下！

Tags | 热门标签

• header
• runtime
• 数组
• filter
• loops
• less
• md5
• char
• substring
• byte
• expression
• instance
• main
• cookie
• blob
• plugins
• node.js
• bit
• format
• integer
• schema
• get
• controller
• future
• select
• dockerfile
• process
• input
• client
• utf-8

RankList | 热门文章

• 1Linux——K8s集群监控
• 22月9日每日安全热点暗网黑客出售近50万印度人卡数据
• 3Python基础教程03序列（sequence）
• 4网络创业022：你最不应该找的理由，不需要强调的，是执行力
• 5LVS 原理
• 6win10子系统centos_在win10中使用WSL搭建Linux开发平台
• 7如何在React应用中实现reCAPTCHA
• 8《题灵祐上人法华院木兰花（其树岭南，移植此》翻译 原文赏析诗人唐刘长卿
• 91050ti换什么显卡好(1050ti换哪款显卡好)
• 10PostgreSQL 14.5复制流（同步复制）
• 11Jetson Agx Orin(Ubuntu20设置Settings选项丢失)修复笔记
• 12两轮电动车什么牌子好（口碑最好的两轮电动车）
• 13跳跃表C语言实现
• 14java 位运算符 以及加法 交换两个变量值
• 15pandas数据框总行

PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有