设为首页收藏本站全国违章查询 爱奇艺VIP视频解析 EditPlus注册码生成 离2017年国庆节还有:
崇尚快乐趴 首页 科技新村 查看内容

修改代码 让Discuz x系列中的日志及门户编辑器都增加插入代码功能且代码高亮

2017-1-8 01:07| 发布者: 快乐趴| 查看: 511| 评论: 0

摘要:    网站经常要发布一些技术文章,文章中经常需要插入代码,而discuz的门户编辑器都没有代码插入功能,于是查找了相关资料,DZ X3.0与X3.2及3.3代码都不相同,大家在修改时请注意代码。查找代码时请使用相近法查找 ...
 
  网站经常要发布一些技术文章,文章中经常需要插入代码,而discuz的门户编辑器都没有代码插入功能,于是查找了相关资料,DZ X3.0与X3.2及3.3代码都不相同,大家在修改时请注意代码。查找代码时请使用相近法查找。
  修改后发布含代码的文章,代码内容高亮如图:

  一、修改说明:
  修改目的:给日志及门户编辑器添加代码插入功能并实现代码高亮
  对应版本: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文件
  查找:
  

[代码]php代码:

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

  在其下插入:
  

[代码]php代码:

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

  然后再查找
  

[代码]php代码:

<a href="javascript:;" class="icoSwf" id="icoSwf" onClick="createFlash(event, 1);return false;" title="<?php echo lang('home/editor', 'editor_link_flash');?>"></a>

  在其下插入:
  

[代码]php代码:

<a href="javascript:;" class="icoCode" id="icoCode" onClick="createCode(event,1);return false;" title="<?php echo lang('home/editor', 'editor_code');?>"></a>

  接着还是继续查找
  

[代码]php代码:

<div id="createPage" class="eMenu" style="display:none;top:35px;left:26px;width:300px;font-size:12px">

  在其上插入
  

[代码]php代码:

<div id="createCode" class="eMenu" style="display:none;top:35px;left:26px;width:400px;font-size:12px">
<?php echo lang('home/editor', 'editor_code_tip');?>:
<select name="codeLanguage" id="codeLanguage"> 
<option value="php">PHP</option> 
<option value="py">Python</option> 
<option value="sql">SQL</option> 
<option value="vb">Visual Basic</option> 
<option value="xml">Html/XML</option> 
<option value="as3">ActionScript3</option> 
<option value="bash">Bash/shell</option> 
<option value="csharp">C#</option> 
<option value="css">CSS</option> 
<option value="js">JavaScript</option> 
<option value="java">Java</option> 
<option value="perl">Perl</option> 
</select><br/>
<textarea type="text" id="Sourcecode" name="Sourcecode" value=" " style="width:400px;height:200;" /></textarea><br/>
<input type="button" onClick="createCode();" name="createURL" value="<?php echo lang('home/editor', 'editor_ok');?>" class="submit" />
<a href="javascript:;" onClick="fHide($('createCode'));return false;"><?php echo lang('home/editor', 'editor_cancel');?></a>
</div>

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

[代码]php代码:

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代码
  

[代码]php代码:

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文件(目的是添加所需语言)
  查找
  

[代码]php代码:

'editor_prompt_mp3' => 'mp3 音乐',

  在其下加上
  

[代码]php代码:

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

  3、修改\static\image\editor\editor_base.js文件
  
用编辑器打开该文件,在文件末尾加上
  

[代码]php代码:

/**
*创建代码高亮及着色方法
*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,"&lt;");
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";
}
}

  然后查找
  

[代码]php代码:

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

  将这段代码改成
  

[代码]php代码:

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

  即在上面的代码中加上|| fInObj(el, createCode)
  接着继续查找
  

[代码]php代码:

icoPage:"createPage"

  将其改成
  

[代码]php代码:

icoPage:"createPage",
icoCode:"createCode"

  查找
  

[代码]php代码:

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

  将其改为
  

[代码]php代码:

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

  4、上传并替换文件
  上传以上修改文件至对应目录。

       5、后台—》全局—》SEO设置—》其他—》其他头部信息添加下面这段代码
  

[代码]php代码:

<script src="static/js/code/scripts/brush.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="static/js/code/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="static/js/code/styles/shThemeDefault.css"/>
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = 'static/js/code//scripts/clipboard.swf';
SyntaxHighlighter.all();
</script> 

  6、下载文件包把里面的static文件夹上传至根目录,后台更新缓存即可。

鲜花

握手

雷人

路过

鸡蛋
分享到新浪微博 收藏 分享 邀请

最新评论

返回顶部