So implementieren Sie Code-Hervorhebung in DedeCms 5.7-DEDECMS-php.cn

Wie implementiert man Code-Hervorhebung in DedeCms 5.7?

Unabhängig davon, ob eine Blog-Website oder eine CMS-artige Website erstellt wird, ist bei vielen davon Code-Hervorhebung erforderlich. Es ist eines der besseren CMS-Website-Erstellungssysteme in China -ins wie WordPress. Ich verwende das neueste dedeCMS 5.7. Ich habe lange nach Informationen über die Integration von CKEditor und SyntaxHighlighter gesucht. und zielt im Allgemeinen nur auf den ckeditor für config.js ab. Die Änderungen sind unterschiedlich.

Empfohlenes Lernen: Dreamweaver cms

Daher kann ich nur selbst darüber nachdenken und es ändern. Jetzt werde ich die Methode als Referenz für Webmaster-Freunde aufschreiben:

1. Gehen Sie zum Herunterladen zunächst auf die offizielle Website von SyntaxHighlighter, URL: http://alexgorbatchev.com/SyntaxHighlighter/download/. Es wird empfohlen, Version 2.1 herunterzuladen . Hier wird die Version 2.1.382 verwendet. Entpacken Sie die heruntergeladene Datei im Ordner „syntaxHighlight“ und entfernen Sie die nutzlosen Dateien, so dass nur die Ordner „scripts“ und „styles“ übrig bleiben.

2. Erstellen Sie einen neuen Dialogordner und erstellen Sie darin eine Datei mit dem Namen syntaxhighlight.js. Da der Code zu groß ist, ist es nicht geeignet, ihn direkt herunterzuladen

Wenn Sie den Stil des Codebereichs ändern möchten, ändern Sie bitte den Stil im

-Tag im folgenden Code.

Der Code lautet wie folgt:

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) +"

Nach dem Login kopieren

"); if (l) { m.insertBefore(l); l.remove() } else { i.insertElement(m) } },

3. Erstellen Sie dann einen neuen Bilderordner, um eine Bilddatei syntaxhighlight.gif zu speichern. Sie können 16 verwenden *16 Pixel Bild

4. Erstellen Sie einen neuen Lang-Ordner, der ein Sprachpaket ist. Darin befinden sich zwei Dateien, eine ist chinesisch cn.js und die andere ist englisch en.js wie folgt:

en.js Der Code lautet wie folgt:

Der Code lautet wie folgt:

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; 
} 
});

Nach dem Login kopieren

cn.js-Code lautet wie folgt:

Der Code lautet wie folgt:

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; 
} 
});

Nach dem Login kopieren

5. Erstellen Sie eine neue Datei „plugin.js“, die einige Konfigurationen für das Plug-in enthält wie folgt:

Der Code lautet wie folgt:

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") 
} 
});

Nach dem Login kopieren

6. Da dedecms 5.7 ein Dedepage-Plugin integriert, wird es verwendet. Fügen Sie das benutzerdefinierte Plug-in ckeeditor im /include/ hinzu. ckeditor/dedepage-Ordner, öffnen Sie die Datei „plugin.js“ und fügen Sie am Ende Folgendes hinzu:

requires: ['syntaxhighlight'], wobei syntaxhighlight die Datei des Code-Hervorhebungs-Plug-Ins ist, der Code danach Das Hinzufügen erfolgt wie folgt:

[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]

Nach dem Login kopieren

7. Ändern Sie die Datei /include/ckeditor/ckeditor.inc.php, fügen Sie nach der Änderung das Element Code in der letzten Zeile des Arrays $toolbar['Basic'] hinzu Der Code lautet wie folgt:

Der Code lautet wie folgt:

$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;) 
);

Nach dem Login kopieren

Zu diesem Zeitpunkt ist die Änderung des Editors abgeschlossen. Die geänderte Dateiverzeichnisstruktur des Syntaxhighlight-Ordners lautet wie folgt:

So implementieren Sie Code-Hervorhebung in DedeCms 5.7

Laden Sie den Syntaxhighlight-Ordner in den Ordner /include/ckeditor/plugins/ hoch, öffnen Sie das Backend, fügen Sie einen Artikel zum Ausprobieren hinzu und prüfen Sie, ob die im Bild gezeigte Schaltfläche auf der letzten Seite erscheint Zeile des Editors:

So implementieren Sie Code-Hervorhebung in DedeCms 5.7

Klicken Sie auf die Schaltfläche, um das unten gezeigte Dialogfeld zur Eingabe des Codes zu öffnen. Sie können zu den erweiterten Optionen wechseln, um die Codehervorhebung zu konfigurieren:

So implementieren Sie Code-Hervorhebung in DedeCms 5.7

8. Dies allein reicht jedoch nicht aus. Sie müssen auch hervorgehobene Pinsel-JS-Dateien und CSS-Dateien in die Artikelvorlagendatei /templets/default/article_article.htm einfügen Da viel JS eingeführt werden muss, wird empfohlen, den importierten Code vor dem Tag zu platzieren, zu warten, bis die vorherige Webseite geladen ist, und ihn dann zu laden und anzuzeigen.

Der Code lautet wie folgt:

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

Nach dem Login kopieren

Die endgültige Darstellung der veröffentlichten und generierten Artikelseite lautet wie folgt:

So implementieren Sie Code-Hervorhebung in DedeCms 5.7

Natürlich das Die Integration weist möglicherweise auch einige Mängel auf. Außerdem kann es sein, dass die Skalierbarkeit des Plug-Ins langsam ist Ich hoffe auch, dass alle Internetnutzer Kommentare abgeben können.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Code-Hervorhebung in DedeCms 5.7. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!