Comment implémenter la mise en évidence de code dans DedeCms 5.7-DEDECMS-php.cn

Comment implémenter la mise en évidence du code dans DedeCms 5.7 ?

Qu'il s'agisse de créer un site Web de blog ou un site Web de type CMS, beaucoup d'entre eux nécessitent une mise en évidence du code. Dreamweaver CMS est l'un des meilleurs systèmes de création de sites Web CMS en Chine. -ins comme WordPress. Il est disponible. J'utilise le dernier dedeCMS 5.7. Je recherche des informations sur Internet depuis longtemps. La plupart d'entre eux écrivent des articles sur l'intégration de CKEditor et SyntaxHighlighter. et ne cible généralement que ckeditor pour config.js. Les modifications sont différentes.

Apprentissage recommandé : Dreamweaver cms

Je ne peux donc qu'y réfléchir et le modifier moi-même. Maintenant, je vais écrire la méthode pour référence aux amis webmasters :

1. Allez d'abord sur le site officiel de SyntaxHighlighter pour télécharger, URL : http://alexgorbatchev.com/SyntaxHighlighter/download/ Il est recommandé de télécharger la version 2.1. La version 3.0 ne semble pas prendre en charge le retour à la ligne automatique. . La version 2.1.382 est utilisée ici. Décompressez le fichier téléchargé dans le dossier syntaxHighlight et supprimez les fichiers inutiles, ne laissant que les dossiers scripts et styles.

2. Créez un nouveau dossier de boîtes de dialogue et créez-y un fichier nommé syntaxhighlight.js. Parce que le code est trop volumineux, il ne convient pas de le publier directement

Si vous souhaitez le modifier Pour le style de la zone de code, veuillez modifier le style dans la balise

Le code est le suivant :

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

Copier après la connexion

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

3. Créez ensuite un nouveau dossier d'images pour stocker un fichier image syntaxhighlight.gif. Le fichier image est affiché dans la barre d'outils de l'éditeur. Vous pouvez en utiliser 16. *16 pixels Image

4. Créez un nouveau dossier de langue, qui est un pack de langue. Il contient deux fichiers, l'un est en chinois cn.js et l'autre en anglais en.js. comme suit :

en.js Le code est le suivant :

Le code est le suivant :

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

Copier après la connexion

le code cn.js est le suivant :

Le code est le suivant :

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

Copier après la connexion

5. Créez un nouveau fichier plugin.js. Le fichier est un fichier requis pour le plug-in ckeditor, qui contient certaines configurations pour le plug-in. comme suit :

Le code est le suivant :

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

Copier après la connexion

6. Puisque dedecms 5.7 intègre un plug-in de dedepage, il est utilisé pour ajouter le plug-in personnalisé ckeditor dans le /include/. ckeditor/dedepage, ouvrez le fichier plugin.js et ajoutez à la fin :

requires : ['syntaxhighlight'], où syntaxhighlight est le fichier du nom du dossier de mise en évidence du code, le code après. l'ajout est le suivant :

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

Copier après la connexion

7. Modifiez le fichier /include/ckeditor/ckeditor.inc.php, ajoutez l'élément Code dans la dernière ligne du tableau $toolbar['Basic'], après modification Le le code est le suivant :

Le code est le suivant :

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

Copier après la connexion

À ce stade, la modification de l'éditeur est terminée. La structure modifiée du répertoire des fichiers du dossier syntaxhighlight est la suivante : <🎜. >

Téléchargez le dossier syntaxhighlight dans le dossier /include/ckeditor/plugins/, ouvrez le backend, ajoutez un article pour essayer et voyez si le bouton comme indiqué dans l'image apparaît sur la dernière ligne de l'éditeur : Comment implémenter la mise en évidence de code dans DedeCms 5.7

Cliquez sur le bouton pour faire apparaître la boîte de dialogue ci-dessous pour saisir le code, et vous pouvez passer aux options avancées pour configurer le code mise en évidence : Comment implémenter la mise en évidence de code dans DedeCms 5.7

8. Mais ceux-ci ne suffisent pas à eux seuls. Vous devez également introduire les fichiers JS et CSS du pinceau mis en surbrillance dans le fichier de modèle d'article /templets/default/article_article. htm, car beaucoup de JS doivent être introduits. , il est donc recommandé de placer le code importé avant la balise , d'attendre que la page Web précédente se charge, puis de la charger et de l'afficher. Comment implémenter la mise en évidence de code dans DedeCms 5.7

Le code est le suivant :

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

Copier après la connexion

Le rendu final de la page de l'article publié et généré est le suivant :

Bien sûr, cela L'intégration présente également quelques défauts. Un grand nombre de fichiers JS peuvent être introduits dans la page html, ce qui peut être lent à charger. De plus, l'évolutivité n'est pas forte. J'optimiserai également le plug-in de temps en temps. J'espère également que tous les internautes pourront faire part de leurs commentaires. Comment implémenter la mise en évidence de code dans DedeCms 5.7