親注冊登錄道勤網(wǎng)-可以查看更多帖子內(nèi)容哦!(包涵精彩圖片、文字詳情等)請您及時注冊登錄-bmrsportswear.com
您需要 登錄 才可以下載或查看,沒有賬號?立即注冊
x
由于道勤小編發(fā)布的文章經(jīng)常需要插入代碼,而discuz的日志及門戶編輯器都沒有代碼插入功能,于是決心修改一下discuz的日志及門戶編輯器在百度也有類似的解決辦法,但是只適合老版本的 x1.5 x2.0 Jimmy按照最新discuz官方的程序修改。
修改效果展示圖,具體演示可參見本站
門戶編輯器插入代碼
333.png (67.18 KB, 下載次數(shù): 121)
下載附件
2015-1-27 16:35 上傳
效果圖:
444.png (232.85 KB, 下載次數(shù): 114)
下載附件
2015-1-27 16:36 上傳
一、修改說明:
修改目的:給日志及門戶編輯器添加代碼插入功能并實現(xiàn)代碼高亮
對應(yīng)版本:Discuz X系列根據(jù)以下修改說明自行修改
支持當前流行的各種編程語言:C#、CSS、C++、Delphi、Java、JavaScript、PHP、Python、Ruby、SQL、Visual Basic、XML / html等
簡介: Discuz X日志及門戶編輯器整合syntaxhighlighter實現(xiàn)代碼高亮,給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}
復制代碼然后再查找 - <a href="javascript:;" class="icoSwf" id="icoSwf" onClick="createFlash(event, 1);return false;" title="<?php echo lang('home/editor', 'editor_link_flash');?>"></a>
復制代碼在其下插入: - <a href="javascript:;" class="icoCode" id="icoCode" onClick="createCode(event,1);return false;" title="<?php echo lang('home/editor', 'editor_code');?>"></a>
復制代碼接著還是繼續(xù)查找 - <div id="createPage" class="eMenu" style="display:none;top:35px;left:26px;width:300px;font-size:12px">
復制代碼在其上插入 - <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>
復制代碼接著為了實現(xiàn)代碼預覽效果,我們還需在文件最下面找到 - 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文件
用編輯器打開該文件,在文件末尾加上 - /**
- *創(chuàng)建代碼高亮及著色方法
- *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 = ''; //設(shè)置初始值
- } 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") 接著繼續(xù)查找 將其改成 - icoPage:"createPage",
- icoCode:"createCode"
復制代碼這段代碼
以上還沒完,,還有一段重要代碼(關(guān)于編輯器菜單的)
查找 - 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"];
復制代碼至此文件修改工作就結(jié)束了.
4、上傳并替換文件
上傳以上修改文件至對應(yīng)目錄,并上傳下面的附件包文件(syntaxhighlighter代碼高亮解析文件)至網(wǎng)站根目錄,最后不要忘了到后臺—》全局—》其他—》其他頭部信息添加下面這段代碼 - <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>
復制代碼否則是不會有代碼高亮效果的注意你文件保存的目錄。
以下是syntaxhighlighter代碼高亮解析文件
syntaxhighlighter代碼高亮解析文件.zip
(58.28 KB, 下載次數(shù): 97)
2015-1-27 16:44 上傳
點擊文件名下載附件
下載積分: 金錢 -1
道勤主機提供365天*24小時全年全天無休、實時在線、零等待的售后技術(shù)支持。竭力為您免費處理您在使用道勤主機過程中所遇到的一切問題!
如果您是道勤主機用戶,那么您可以通過QQ【792472177】、售后QQ【59133755】、旺旺【詮釋意念】、微信:q792472177免費電話、后臺提交工單這些方式聯(lián)系道勤主機客服!
如果您不是我們的客戶也沒問題,點擊頁面最右邊的企業(yè)QQ在線咨詢圖標聯(lián)系我們并購買后,我們?yōu)槟赓M進行無縫搬家服務(wù),讓您享受網(wǎng)站零訪問延遲的遷移到道勤主機的服務(wù)! |