请选择 进入手机版 | 继续访问电脑版

每天都有无数事情发生,每天都曾在游戏历史上留下记录。游戏史上的今天,带你每天回顾这个日子的历史事件,回味经典诞生的瞬间。

酷站网 首页 站长学院 Discuz教程

Discuz x3日志门户编辑器增加插入代码功能且代码高亮

2017-7-16 18:21 33 0
简介
由于酷站小编发布的文章经常需要插入代码,而discuz的日志及门户编辑器都没有代码插入功能,于是决心修改一下discuz的日志及门户编辑器在百度也有类似的解决办法,但是只适合老版本的 x1.5 x2.0 Jimmy按照最新discuz ...
由于酷站小编发布的文章经常需要插入代码,而discuz的日志及门户编辑器都没有代码插入功能,于是决心修改一下discuz的日志及门户编辑器在百度也有类似的解决办法,但是只适合老版本的 x1.5 x2.0 Jimmy按照最新discuz官方的程序修改。
修改效果展示图,具体演示可参见本站
门户编辑器插入代码

效果图:

一、修改说明:

修改目的:给日志及门户编辑器添加代码插入功能并实现代码高亮

对应版本:Discuz X系列根据以下修改说明自行修改

支持当前流行的各种编程语言:C#、CSS、C++、Delphi、Java、JavaScript、PHP、Python、Ruby、SQL、Visual Basic、XML / HTML等

简介: Discuz X日志及门户编辑器整合syntaxhighlighter实现代码高亮,给Discuz X日志及门户编辑器添加代码插入功能,方便文章插入代码

二、所需修改文件:

根目录\source\module\home\home_editor.php

根目录\source\language\home\lang_editor.php

根目录\static\image\editor\editor_base.js

三、修改步骤:

1、修改\source\module\home\home_editor.php文件 

查找:

a.icoSwitchMdi{background-position:-671px 0px;width:23px}

在其下插入:

a.icoCode {background-position:-120px -20px}

然后再查找

在其下插入:

接着还是继续查找

在其上插入

接着为了实现代码预览效果,我们还需在文件最下面找到

body { margin: 0; padding: 0; word-wrap: break-word; font-size:14px; line-height:1.8em; font-family: Tahoma, Arial, Helvetica, snas-serif; }

在下面加入这段定义pre标签的CSS代码

pre {
font-size:9pt;
font-family:Courier New,Arial;
border:1px solid #ddd;
border-left:5px solid #6CE26C;
background:#f6f6f6;
padding:5px;
}

不然你是看不到“预览”效果的。

2、修改\source\language\home\lang_editor.php文件(目的是添加所需语言)

查找

'editor_prompt_mp3' => 'mp3 音乐',

在其下加上

'editor_code_tip' => '请选择代码语言以便于着色',
'editor_code' => '插入代码',

3、修改\static\image\editor\editor_base.js文件

用编辑器打开该文件,在文件末尾加上

 /**
*创建代码高亮及着色方法
*Time 2013.10.16 Jimmy
*/
function createCode(e, show) {
if(typeof show == 'undefined') {
var sCode = $('Sourcecode').value;
var sLan = $('codeLanguage').value;
sCode = sCode.replace(/\</g,"<");
if (sCode!=null){
setCaret();
format("insertHTML", '<div><h3>[代码]'+sLan+'代码:</h3><pre class="brush:'+sLan+';auto-links:false;">'+sCode+'</pre></div> <br/>');
}
fHide($('createCode'));
$('Sourcecode').value = ''; //设置初始值
} else {
if(gIsIE){
var e = window.event;
}
getCaret();
var dvCodeBox = $("createCode");
var iX = e.clientX;
var iY = e.clientY;
dvImgBox.style.display = "";
dvImgBox.style.left = (iX-300) + "px";
dvImgBox.style.top = 33 + "px";
}
}

然后查找

if(fInObj(el, "createUrl") || fInObj(el, "createImg") || fInObj(el, "createSwf") || fInObj(el, "createPage")){

将这段代码改成

if(fInObj(el, "createUrl") || fInObj(el, "createImg") || fInObj(el, "createSwf") || fInObj(el, "createPage")|| fInObj(el, "createCode")){

即在上面的代码中加上|| fInObj(el, "createCode")

接着继续查找

icoPage:"createPage"

将其改成

icoPage:"createPage",
icoCode:"createCode"

以上还没完,,还有一段重要代码(关于编辑器菜单的)

查找

var arr = ["fontface", "fontsize", "dvForeColor", "dvPortrait", "divAlign", "divList" ,"divInOut", "editFaceBox", "createUrl", "createImg", "createSwf", "createPage"];

将其改为

var arr = ["fontface", "fontsize", "dvForeColor", "dvPortrait", "divAlign", "divList" ,"divInOut", "editFaceBox", "createUrl", "createImg", "createSwf", "createPage","creatCode"];

至此文件修改工作就结束了.

4、上传并替换文件

上传以上修改文件至对应目录,并上传下面的附件包文件(syntaxhighlighter代码高亮解析文件)至网站根目录,最后不要忘了到后台—》全局—》其他—》其他头部信息添加下面这段代码




否则是不会有代码高亮效果的注意你文件保存的目录。

以下是syntaxhighlighter代码高亮解析文件

syntaxhighlighter代码高亮解析文件.zip



鲜花

握手

雷人

路过

鸡蛋
精彩阅读 更多
广告位

400-888-8888

周一至周五 9:30-18:00

北京市大兴区景园北街2号02号

  • 扫一扫 手机访问

Archiver-手机版-小黑屋- 酷站网.  

Powered by Discuz!X3.3© 2012-2018 Comsenz Inc. 版权所有