CKEditor und SyntaxHighlighter 3.0.83

Voraussetzung

WB Version 2.8.1 mit eingebundenem jQuery Framework

SyntaxHighlighter 3.0.83

ckeditor-syntaxhighlight Plugin

sicherer Umgang mit einem Texteditor

Einbindung des CKEditor-Plugins

Wenn Sie das Plugin auf Ihren Rechner geladen haben entpacken Sie es mit dem entsprechenden Programm und kopieren es per FTP in den Plugin-Ordner des CKEditors.

/modules/ckeditor/ckeditor/plugins

Nun gehen Sie in den Ordner /modules/ckeditor/wb_config/custom und benennen die Datei custom.wb_ckconfig.js in wb_ckconfig.js um. Da unsere Änderungen ja bei einem zukünftigen Update des CKEditors erhalten bleiben sollen führen wir unsere Änderungen auch nur in dieser Datei durch. Sie öffnen nun die Datei und gehen zur Zeile 29.

   config.extraPlugins             = 'wbdroplets,wblink';

und ändern Sie in

   config.extraPlugins             = 'wbdroplets,wblink,syntaxhighlight';

Jetzt gehen Sie in Zeile 55 und sollten folgendes sehen

config.toolbar_WB_Full  =                                  [['Source','-','Preview','Templates'],
								['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker','Scayt'],
								['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
								['Maximize','ShowBlocks','-','UIColor','About'],'/',
								['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
								['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
								['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
								['wbdroplets','wblink'],
								['Link','Unlink','Anchor'],
								['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar'],'/',
                                                                ['Button','ImageButton'],
								['Styles','Format','Font','FontSize'],
								['TextColor','BGColor']];

Hier tragen Sie nun ein wo der Code-Button in der CKEditor Toolbar erscheinen soll. Ich habe mich dafür entschieden ihn vor dem WB Droplets Button zu setzen.

config.toolbar_WB_Full  =                                  [['Source','-','Preview','Templates'],
								['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker','Scayt'],
								['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
								['Maximize','ShowBlocks','-','UIColor','About'],'/',
								['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
								['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
								['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
								['Code','wbdroplets','wblink'],
								['Link','Unlink','Anchor'],
								['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar'],'/',
                                                                ['Button','ImageButton'],
								['Styles','Format','Font','FontSize'],
								['TextColor','BGColor']];

Die Datei kann nun gespeichert werden und der CKEditor ist vorbereitet für den Einsatz des SyntaxHighlighters. Ihre Toolbar sollte nun so aussehen.

Klicken Sie nun in der Toolbar auf diesen Code-Button bekommen Sie eine Eingabemaske für den einzufügenden Code. Damit dieser dann auch nachher so angezeigt wird, wie Sie es hier auf der Seite sehen, müssen wir nun noch den SyntaxHighlighter einbinden.

Einbindung des SyntaxHighlighters

Auch diesen Download müssen Sie entpacken und per FTP auf Ihren Webspace laden. Wo Sie den Ordner ablegen ist eigentlich egal, am Ende müssen nur die Pfade dorthin stimmen. Ich habe mich dafür entschieden den Ordner syntaxhighlighter in syntax umzubenennen und ihn ins Verzeichnis include zu übertragen. Die nachfolgende Beschreibung baut darauf auf.

Um so wenige Dateien wie möglich ins Template einzubinden habe ich eine Datei syntax.js mit folgendem Inhalt erstellt.

$.insert('/include/syntax/scripts/shCore.js');
$.insert('/include/syntax/scripts/shAutoloader.js');

function path()
{
  var args = arguments,
      result = []
      ;
       
  for(var i = 0; i < args.length; i++)
      result.push(args[i].replace('@',
 '/include/syntax/scripts/'));
       
  return result
};
 
SyntaxHighlighter.autoloader.apply(null,
 path(
  'applescript            @shBrushAppleScript.js',
  'actionscript3 as3      @shBrushAS3.js',
  'bash shell             @shBrushBash.js',
  'coldfusion cf          @shBrushColdFusion.js',
  'cpp c                  @shBrushCpp.js',
  'c# c-sharp csharp      @shBrushCSharp.js',
  'css                    @shBrushCss.js',
  'delphi pascal          @shBrushDelphi.js',
  'diff patch pas         @shBrushDiff.js',
  'erl erlang             @shBrushErlang.js',
  'groovy                 @shBrushGroovy.js',
  'java                   @shBrushJava.js',
  'jfx javafx             @shBrushJavaFX.js',
  'js jscript javascript  @shBrushJScript.js',
  'perl pl                @shBrushPerl.js',
  'php                    @shBrushPhp.js',
  'text plain             @shBrushPlain.js',
  'py python              @shBrushPython.js',
  'ruby rails ror rb      @shBrushRuby.js',
  'sass scss              @shBrushSass.js',
  'scala                  @shBrushScala.js',
  'sql                    @shBrushSql.js',
  'vb vbnet               @shBrushVb.js',
  'xml xhtml xslt html    @shBrushXml.js'
));

 SyntaxHighlighter.all()

Diese Datei habe ich in meinem Template-Ordner in dem Ordner js gespeichert und lade sie vor body Ende. Auch bei dieser Datei ist es egal wo Sie sie speichern, einzig und alleine der Pfad beim Einbinden muss stimmen. Wenn Sie sich in Ihrem Templateverzeichniss einen Ordner js anlegen und die syntax.js dort ablegen können Sie diesen Code verwenden.

Die Datei muss zwingend vor body Ende geladen werden!

<script  src="<?php echo TEMPLATE_DIR; ?>/js/syntax.js" type="text/javascript"></script>

Damit das Ganze nun auch noch schön aussieht fehlen uns nur noch die passenden CSS Dateien die wir wie gewohnt in den Head unseres Templates einbinden.

<link  rel="stylesheet" type="text/css" href="include/syntax/styles/shCore.css" />
<link  rel="stylesheet" type="text/css" href="include/syntax/styles/shThemeDefault.css" />

Der SyntaxHighlighter bringt verschiedene Design/Themes mit welche durch das Laden der entsprechenden CSS Dateien eingestellt werden können.

So, das war es schon. Wenn Sie nun auf den Code-Button klicken, und den Code den Sie darstellen wollen eingeben, sollte es nach dem Speichern des Wysiwyg-Abschnittes im Frontend bei Ihnen genauso aussehen wie hier auf meiner Seite.

Ich hoffe dass ich nichts vergessen habe und Sie das Tutorial so umsetzen können. Sollten Sie Fragen dazu haben benutzen Sie bitte mein Kontaktformular. Sofern ich die Frage beantworten kann werde ich es tun.

zurück