CMS 튜토리얼 Dedecms DedeCms 5.7에서 코드 강조를 구현하는 방법

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

Dec 26, 2019 am 09:49 AM
dedecms

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

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에서 코드 강조를 구현하는 방법

물론 이 통합에도 몇 가지 단점이 있습니다. 즉, 많은 수의 JS 파일이 도입될 수 있습니다. 상대적으로 느리고 확장성이 강하지 않습니다. 또한 플러그인을 수시로 최적화할 예정이며 모든 네티즌들이 의견을 제시할 수 있기를 바랍니다.

위 내용은 DedeCms 5.7에서 코드 강조를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Imperial cms 리소스 네트워크 템플릿은 어디에 있습니까? Imperial cms 리소스 네트워크 템플릿은 어디에 있습니까? Apr 17, 2024 am 10:00 AM

Empire 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:24 PM

Dedecms는 뉴스 웹사이트, 블로그 웹사이트, 전자상거래 웹사이트, 포럼 및 커뮤니티 웹사이트, 교육 웹사이트, 포털 웹사이트, 기타 유형의 웹사이트(예: 기업 웹사이트)를 비롯한 다양한 유형의 웹사이트를 만드는 데 사용할 수 있는 오픈 소스 CMS입니다. , 개인 웹사이트, 사진 앨범 웹사이트, 동영상 공유 웹사이트)

Dedecms에 로컬 비디오를 업로드하는 방법 Dedecms에 로컬 비디오를 업로드하는 방법 Apr 16, 2024 pm 12:39 PM

Dedecms를 사용하여 로컬 비디오를 업로드하는 방법은 무엇입니까? Dedecms에서 지원하는 형식으로 비디오 파일을 준비하십시오. Dedecms 관리 백엔드에 로그인하고 새 비디오 카테고리를 만듭니다. 영상 관리 페이지에 영상 파일을 업로드하고 관련 정보를 입력한 후 영상 카테고리를 선택하세요. 기사를 편집하면서 동영상을 삽입하려면 업로드된 동영상의 파일 이름을 입력하고 크기를 조정하세요.

Dedecms 사용 방법 Dedecms 사용 방법 Apr 16, 2024 pm 12:15 PM

Dedecms는 콘텐츠 관리, 템플릿 시스템 및 보안 보호를 제공하는 오픈 소스 중국 CMS 시스템입니다. 구체적인 사용법에는 다음 단계가 포함됩니다. 1. Dedecms를 설치합니다. 2. 데이터베이스를 구성합니다. 3. 관리 인터페이스에 로그인합니다. 4. 콘텐츠를 생성합니다. 5. 템플릿을 설정합니다. 6. 사용자를 관리합니다. 7. 시스템을 유지관리한다.

Dedecms에는 어떤 허점이 있습니까? Dedecms에는 어떤 허점이 있습니까? Aug 03, 2023 pm 03:56 PM

DedeCMS는 몇 가지 잠재적인 취약점과 보안 위험이 있는 오픈 소스 콘텐츠 관리 시스템입니다. 1. SQL 주입 취약점. 공격자는 악의적인 SQL 쿼리 문을 구성하여 무단 작업을 수행하거나 민감한 데이터를 얻을 수 있습니다. 2. 파일 업로드 취약점, 공격자는 다음을 포함하는 파일을 업로드할 수 있습니다. 3. 민감한 정보 유출 4. 인증되지 않은 취약점 악용.

정확하고 신뢰할 수 있는 Dedecms 변환 도구 평가 보고서 정확하고 신뢰할 수 있는 Dedecms 변환 도구 평가 보고서 Mar 12, 2024 pm 07:03 PM

정확하고 신뢰할 수 있는 Dedecms 변환 도구 평가 보고서 인터넷 시대의 급속한 발전으로 인해 웹 사이트 구축은 많은 기업과 개인에게 필요한 도구 중 하나가 되었습니다. 웹사이트 구축에 있어서 콘텐츠관리시스템(CMS)을 이용하면 웹사이트의 콘텐츠와 기능을 보다 편리하고 효율적으로 관리할 수 있습니다. 그 중 Dedecms는 잘 알려진 CMS 시스템으로 다양한 웹 사이트 구축 프로젝트에 널리 사용되고 있습니다. 그러나 때로는 Dedecms 웹사이트를 다른 형식으로 변환해야 하는 경우가 있는데, 이 경우 변환 도구를 사용해야 합니다.

Dedecms 인코딩 변환 기능을 배우는 간단한 방법 Dedecms 인코딩 변환 기능을 배우는 간단한 방법 Mar 14, 2024 pm 02:09 PM

Dedecms 인코딩 변환 기능을 배우는 것은 복잡하지 않습니다. 간단한 코드 예제를 통해 이 기술을 빠르게 익힐 수 있습니다. Dedecms에서 인코딩 변환 기능은 일반적으로 시스템의 정상적인 작동과 데이터의 정확성을 보장하기 위해 중국어 왜곡 문자 및 특수 문자와 같은 문제를 처리하는 데 사용됩니다. 다음은 다양한 인코딩 관련 요구에 쉽게 대처할 수 있도록 Dedecms의 인코딩 변환 기능을 사용하는 방법을 자세히 소개합니다. 1.UTF-8에서 GBK로 Dedecms에서 UTF-8로 인코딩된 문자열을 G로 변환해야 하는 경우

See all articles