DedeCms 5.7에서 코드 강조를 구현하는 방법-Dedecms-php.cn

DedeCms 5.7에서 코드 강조 표시를 구현하는 방법은 무엇입니까?

블로그 웹사이트를 구축하든 CMS 유형의 웹사이트를 구축하든 대부분 코드 강조 표시가 필요합니다. Dreamweaver CMS는 플러그인이 많은 WordPress와 달리 중국에서 가장 우수한 CMS 웹 사이트 구축 시스템 중 하나입니다. 최신 dedeCMS 5.7을 사용해서 오랫동안 인터넷에서 정보를 찾아봤는데 대부분 CKEditor와 SyntaxHighlighter의 통합에 대한 글을 썼는데, dedecms는 config.js의 일반적인 수정과는 다릅니다. ckeditor만 대상으로 합니다.

추천 학습: DreamWeaver cms

그래서 제가 직접 생각하고 수정해볼 수 밖에 없습니다. 이제 웹마스터 친구들의 참고 방법을 적어보겠습니다.

1. 먼저 SyntaxHighlighter 공식 홈페이지에 가서 다운로드 받으세요. URL: http://alexgorbatchev .com/SyntaxHighlighter/download/ 버전 2.1을 다운로드하는 것이 좋습니다. 버전 3.0은 자동 줄 바꿈을 지원하지 않는 것 같습니다. 여기서는 버전 2.1.382가 사용됩니다. 다운로드한 파일을 SyntaxHighlight 폴더에 압축을 풀고 쓸모없는 파일을 제거하고 스크립트와 스타일 폴더만 남겨둡니다.

2. 새 대화 상자 폴더를 만들고 그 안에 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) } },

3. 그런 다음 새로운 이미지 폴더를 만들어 Syntaxhighlight.gif 이미지 파일을 편집기 도구 모음에 표시합니다.

4. 새 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; 
} 
});

로그인 후 복사

5. 새로운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") 
} 
});

로그인 후 복사

6. Dedecms 5.7로 인해 ckeditor 사용자 정의 플러그인을 추가했습니다. in. /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]

로그인 후 복사

7. /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;) 
);

로그인 후 복사

이제 에디터 수정이 완료되었습니다. 수정된 구문하이라이트 폴더 파일 디렉터리 구조는 다음과 같습니다.

DedeCms 5.7에서 코드 강조를 구현하는 방법

구문하이라이트 폴더를 /include/ckeditor/에 업로드합니다. 플러그인/ 폴더를 열고 배경을 열고 기사를 추가한 후 사용해 보세요. 그림과 같은 버튼이 편집기의 마지막 줄에 나타나는지 확인하세요.

DedeCms 5.7에서 코드 강조를 구현하는 방법

버튼을 클릭하면 그림과 같은 대화 상자가 나타납니다. 아래에서 코드를 입력하고 고급 옵션으로 전환하여 코드 강조 표시를 구성할 수 있습니다.

DedeCms 5.7에서 코드 강조를 구현하는 방법

8. 그러나 이것만으로는 충분하지 않으며 기사 템플릿 파일 /templets/default/에 강조 표시를 도입해야 합니다. Article_article.htm Brush 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에서 코드 강조를 구현하는 방법