首頁 CMS教程 DEDECMS DedeCms 5.7程式碼高亮怎麼實現

DedeCms 5.7程式碼高亮怎麼實現

Dec 26, 2019 am 09:49 AM
dedecms

DedeCms 5.7程式碼高亮怎麼實現

DedeCms 5.7程式碼高亮怎麼實作?

無論建部落格網站或CMS類型網站,很多都需要程式碼高亮,織夢CMS是國內比較優秀的CMS建站系統之一,不像Wordpress一樣有大把大把的插件可用,我用的是最新的dedeCMS 5.7,在網上搜了很長時間資料,大都寫的是CKEditor和SyntaxHighlighter整合的文章,但是dedecms將ckeditor做了集成,和一般的只針對於ckeditor對config.js修改不同。

推薦學習:織夢cms

所以只能自己琢磨修改了,現將方法寫出供站長朋友們參考: 

一、先去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;<table style="border:1px solid #EAED9C;width:660px;"><tr><td><pre class="&#39; + k + &#39;">&#39; 
+ c(j.code) +"
登入後複製
"); if (l) { m.insertBefore(l); l.remove() } else { i.insertElement(m) } },

三、然後新建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 <em>3,10,15</em>.&#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;输入以逗号分隔的行号, 如 <em>3,10,15</em>.&#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 : ['syntaxhighlight'],其中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['Basic']數組的最後一行添加元素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資料夾檔案目錄結構圖如下圖:

DedeCms 5.7程式碼高亮怎麼實現

#  將syntaxhighlight資料夾上傳到/include/ckeditor/plugins/資料夾下,打開後台,新增文章試一下,看看編輯器的上最後一行是否出現如圖所示的按鈕:

DedeCms 5.7程式碼高亮怎麼實現

  點擊按鈕彈出如下圖所示的對話方塊輸入程式碼,並且可以切換到進階選項對程式碼高亮顯示做一些設定:

DedeCms 5.7程式碼高亮怎麼實現

八、但是光這些還不夠,還要在文章模板文件/templets/default/article_article.htm文件裡引入高亮顯示的筆刷JS文件和CSS文件,由於是需要引入很多JS ,所以建議將引入的程式碼放在標籤之前,等待前面的網頁加載完後加載,進行顯示。

程式碼如下:

<script type="text/javascript" src="/include/ckeditor/plugins/syntaxhighlight/scripts/shCore.js"> </script> 
<script type="text/javascript" src="/include/ckeditor/plugins/syntaxhighlight/scripts/shBrushJava.js"></script> 
<script type="text/javascript" src="/include/ckeditor/plugins/syntaxhighlight/scripts/shBrushJScript.js"></script> 
<script type="text/javascript" src="/include/ckeditor/plugins/syntaxhighlight/scripts/shBrushPhp.js"></script> 
<script type="text/javascript" src="/include/ckeditor/plugins/syntaxhighlight/scripts/shBrushScala.js"></script> 
<script type="text/javascript" src="/include/ckeditor/plugins/syntaxhighlight/scripts/shBrushSql.js"></script> 
<script type="text/javascript" src="/include/ckeditor/plugins/syntaxhighlight/scripts/shBrushVb.js"></script> 
<script type="text/javascript" src="/include/ckeditor/plugins/syntaxhighlight/scripts/shBrushXml.js"></script> 
<script type="text/javascript" src="/include/ckeditor/plugins/syntaxhighlight/scripts/shBrushBash.js"></script> 
<script type="text/javascript" src="/include/ckeditor/plugins/syntaxhighlight/scripts/shBrushCpp.js"></script> 
<script type="text/javascript" src="/include/ckeditor/plugins/syntaxhighlight/scripts/shBrushCSharp.js"></script> 
<script type="text/javascript" src="/include/ckeditor/plugins/syntaxhighlight/cripts/shBrushCss.js"></script> 
<script type="text/javascript" src="/include/ckeditor/plugins/syntaxhighlight/scripts/shBrushDelphi.js"></script> 
<script type="text/javascript" src="/include/ckeditor/plugins/syntaxhighlight/scripts/shBrushDiff.js"></script> 
<script type="text/javascript" src="/include/ckeditor/plugins/syntaxhighlight/scripts/shBrushGroovy.js"></script> 
<script type="text/javascript" src="/include/ckeditor/plugins/syntaxhighlight/scripts/shBrushPlain.js"></script> 
<script type="text/javascript" src="/include/ckeditor/plugins/syntaxhighlight/scripts/shBrushPython.js"></script> 
<script type="text/javascript" src="/include/ckeditor/plugins/syntaxhighlight/scripts/shBrushRuby.js"></script> 
<link type="text/css" rel="stylesheet" href="/include/ckeditor/plugins/syntaxhighlight/styles/shCore.css"/> 
<link type="text/css" rel="stylesheet" href="/include/ckeditor/plugins/syntaxhighlight/styles/shThemeDefault.css"/> 
<script type="text/javascript"> 
SyntaxHighlighter.config.clipboardSwf = &#39;/include/ckeditor/plugins/syntaxhighlight/scripts/clipboard.swf&#39;; 
SyntaxHighlighter.all(); 
</script>
登入後複製

最後發表並產生的文章頁面效果圖如下:

DedeCms 5.7程式碼高亮怎麼實現

  當然,該整合也有點缺點,就是在html頁面頁面中可能會引入大量的JS文件,加載起來可能會比較慢,另外可拓展性不強,我也會不定期優化該插件,也希望各位網友能提出意見。

以上是DedeCms 5.7程式碼高亮怎麼實現的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

帝國cms資源網模板在哪 帝國cms資源網模板在哪 Apr 17, 2024 am 10:00 AM

帝國CMS模板下載位置:官方模板下載:https://www.phome.net/template/第三方模板網站:https://www.dedecms.com/diy/https://www.0978.com.cn /https://www.jiaocheng.com/安裝方式:下載模板解壓縮模板上傳模板選擇模板

dedecms怎麼實現模板替換 dedecms怎麼實現模板替換 Apr 16, 2024 pm 12:12 PM

在 Dedecms 中實作範本替換可以透過以下步驟:修改 global.cfg 文件,設定所需的語言包。修改 taglib.inc.php 鉤子文件,加入對語言後綴模板文件的支援。建立帶有語言後綴的新模板文件,修改所需內容。清除 Dedecms 快取。

dedecms怎麼上傳本機視頻 dedecms怎麼上傳本機視頻 Apr 16, 2024 pm 12:39 PM

如何使用 Dedecms 上傳本機影片?準備影片文件,確保格式符合 Dedecms 支援的格式。登入 Dedecms 管理後台,建立新的影片分類。在影片管理頁面上傳影片文件,填寫相關資訊並選擇影片分類。在編輯文章時嵌入視頻,輸入上傳視頻的文件名並調整尺寸。

dedecms都能做什麼網站 dedecms都能做什麼網站 Apr 16, 2024 pm 12:24 PM

Dedecms是一款開源CMS,可用於創建各種類型的網站,包括:新聞網站部落格網站電商網站論壇和社群網站教育網站入口網站其他類型的網站(例如企業網站、個人網站、相簿網站、影片分享網站)

dedecms有什麼漏洞 dedecms有什麼漏洞 Aug 03, 2023 pm 03:56 PM

DedeCMS是一個開源的內容管理系統,會存在一些潛在的漏洞和安全風險:1、SQL注入漏洞,攻擊者可以透過建構惡意的SQL查詢語句來執行未經授權的操作或取得敏感資料;2、文件上傳漏洞,攻擊者可以上傳包含惡意程式碼的檔案到伺服器上,從而執行任意程式碼或取得伺服器權限;3、敏感資訊外洩;4、未經身份驗證的漏洞利用。

dedecms怎麼用 dedecms怎麼用 Apr 16, 2024 pm 12:15 PM

Dedecms 是一款開源中文 CMS 系統,提供內容管理、模板系統和安全保護等功能。具體使用方法包含以下步驟:1. 安裝 Dedecms。 2. 配置資料庫。 3. 登入管理介面。 4. 創建內容。 5. 設定模板。 6. 管理用戶。 7. 維護系統。

dedecms怎樣實現模版替換? dedecms怎樣實現模版替換? Apr 16, 2024 pm 12:21 PM

在 DedecMS 中實現模版替換,需執行下列步驟:決定要替換的模版文件,常見的文件有 index.htm、list.htm 和 show.htm。建立新的模版文件,保留 DedecMS 標記。上傳新模版文件,覆蓋原始文件。清除快取。刷新網站以查看更改。

精準可靠的dedecms轉換工具評測報告 精準可靠的dedecms轉換工具評測報告 Mar 12, 2024 pm 07:03 PM

精準可靠的dedecms轉換工具評測報告隨著網路時代的快速發展,網站建置已成為許多企業和個人必備的工具之一。在網站建置中,使用內容管理系統(CMS)可以更方便有效率地管理網站內容和功能。其中,dedecms作為一款知名的CMS系統,被廣泛應用於各種網站建置專案中。然而,有時候我們會面臨著需要將dedecms網站轉換為其他格式的需求,這時就需要用到轉換工具

See all articles