Editor-Update: GS 3.2.0 mit CKE 4.1 + Fehlerkorrektur

Ein Gastbeitrag von karamo, danke!

Der aktuelle Stand (10.4.2013) ist: GetSimple v3.2.0 mit CKEditor v3.6.2

Die Zeit schreitet aber voran und damit auch die Versionen.

GetSimple v3.2.1 mit CKE v4.1 ist als Testversion hier verfügbar: Stable patched to ckeditor to 4.1 Download

Wenn Ihr aber den neueren CKE 4.1 in Eurem bestehenden GS 3.2.0 updaten wollt, dann sind ein paar kleine Schritte durchzuführen. Die Änderungen wurden von mir getestet und werden nachfolgend im Detail angegeben. (Siehe auch Thread: http://get-simple.info/forums/showthread.php?tid=4514 )

Gleichzeitig werden auch folgende Fehler bzw. Einschränkungen von GS 3.2.0 behoben:

Für diese Änderungen stelle ich auch fertige Dateien zur Verfügung, wo dies möglich ist. Dies ist gedacht für diejenigen, die lieber ein Upload einer Datei auf ihren Server machen wollen, als eine bestehende Datei ändern.

Vorbedingungen (dafür getestet):

Der einfache Weg, nur die neueren Dateien des CKEditor 4.1 über die bestehenden zu kopieren (Upload), ist zwar der erste Schritt, reicht aber nicht aus. Der Grund ist unter anderem auch der, dass der Skin “getsimple” mit CKEditor 4.1 nicht kompatibel ist. Die teilweise doch blassen Buttons waren aber sowieso immer schon recht ärgerlich.

Mein Ziel ist es immer, möglichst wenige Eingriffe und Änderungen in bestehende Systeme zu machen. Und auch die Anpassungen dort zu machen, wo sie hingehören. Damit war klar, dass “CKE 4.1 full” grundsätzlich mal mit seinen Default-Einstellungen verwendet werden soll.

Den CKEditor  4.1 gibt es in 4 verschiedenen “Versionen” als Download: Basic, Standard, Full und Custom, die sich nur im Umfang der Toolbar und Plugins unterscheiden.

Anpassungen und Ergänzungen sind dann natürlich jederzeit nach persönlichem Geschmack und Erfordernissen möglich.

Es sind noch nicht alle hier vorgeschlagenen Änderungen in der Stable-Patch-Version GetSimple 3.2.1 (siehe oben) durchgeführt.

 

Die erforderlichen Schritte:

  1. Sichern durch Umbenennen des Verzeichnisses …\getsimple\admin\template\js\ckeditor in zB. …\ckeditor362
  2. Download von CKE 4.1 full, entpacken und Upload auf den Server.
  3. Wenn gewünscht, Download von Skin "kama" und/oder Skin "moonocolor", diese entpacken und Upload auf den Server unter …\getsimple\admin\template\js\ckeditor\skins
    Diese Dateien / Skins  können auch von hier geladen werden: moono moonocolor kama
  4. Die Datei …\getsimple\admin\edit.php zur Sicherung umbenennen, eine Kopie davon als edit.php händisch nach nachfolgenden Angaben editieren oder die gesamte geänderte Datei edit.php von hier verwenden. Entpacken und Upload auf Server.
  5. Den  Skin “kama” o. a. aktivieren und Toolbar umrangieren für bessere Platzeinteilung.
  6. Weitere Optionen in der Konfigurationsdatei von CKE eintragen.
  7. SyntaxHighlighting mittels CodeMirror benötigt noch kleine Anpassungen. (Infos folgen)
  8. Die deutsche Sprachdatei muß erweitert/ersetzt werden.

 

Die Änderungen im Detail:

edit.php ab Zeile 302 - Original aus GS 3.2.0
Die php-Sequenz und den folgenden javascript-Abschnitt vollständig ersetzen. 

<?php 
        if (defined('GSEDITORHEIGHT')) { $EDHEIGHT = GSEDITORHEIGHT .'px'; } else {     $EDHEIGHT = '500px'; }
        if (defined('GSEDITORLANG')) { $EDLANG = GSEDITORLANG; } else { $EDLANG = i18n_r('CKEDITOR_LANG'); }
        if (defined('GSEDITORTOOL')) { $EDTOOL = GSEDITORTOOL; } else { $EDTOOL = 'basic'; }
        if (defined('GSEDITOROPTIONS') && trim(GSEDITOROPTIONS)!="") { $EDOPTIONS = ", ".GSEDITOROPTIONS; } else {      $EDOPTIONS = ''; }
                        
        if ($EDTOOL == 'advanced') {
                $toolbar = "['Bold', 'Italic', 'Underline', 'NumberedList', 'BulletedList', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', 'Table', 'TextColor', 'BGColor', 'Link', 'Unlink', 'Image', 'RemoveFormat', 'Source'],
                '/',
                ['Styles','Format','Font','FontSize']";
        } elseif ($EDTOOL == 'basic') {
                $toolbar = "['Bold', 'Italic', 'Underline', 'NumberedList', 'BulletedList', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', 'Link', 'Unlink', 'Image', 'RemoveFormat', 'Source']";
        } else { $toolbar = GSEDITORTOOL; }
?>

<?php if ($HTMLEDITOR != '') { ?>
<script type="text/javascript" src="template/js/ckeditor/ckeditor.js"></script><script type="text/javascript">

<script type="text/javascript">

var editor = CKEDITOR.replace( 'post-content', {
                skin : 'getsimple',
                forcePasteAsPlainText : true,
                language : '<?php echo $EDLANG; ?>',
                defaultLanguage : 'en',
                <?php if (file_exists(GSTHEMESPATH .$TEMPLATE."/editor.css")) { 
                        $fullpath = suggest_site_path();
                        ?>
                        contentsCss: '<?php echo $fullpath; ?>theme/<?php echo $TEMPLATE; ?>/editor.css',
                <?php } ?>
                entities : false,
                uiColor : '#FFFFFF',
                height: '<?php echo $EDHEIGHT; ?>',
                baseHref : '<?php echo $SITEURL; ?>',
                toolbar : 
                [
                <?php echo $toolbar; ?>
                ]
                <?php echo $EDOPTIONS; ?>,                                        
                tabSpaces:10,
                filebrowserBrowseUrl : 'filebrowser.php?type=all',
                filebrowserImageBrowseUrl : 'filebrowser.php?type=images',
                filebrowserWindowWidth : '730',
                filebrowserWindowHeight : '500'
});
CKEDITOR.instances["post-content"].on("instanceReady", InstanceReadyEvent);
        function InstanceReadyEvent() {
                this.document.on("keyup", function () {
                                $('#editform #post-content').trigger('change');
          });
        }

</script>

ersetzen durch: 

<?php 
        if (defined('GSEDITORHEIGHT')) { $EDHEIGHT = GSEDITORHEIGHT .'px'; } else {     $EDHEIGHT = '500px'; }
        if (defined('GSEDITORLANG')) { $EDLANG = GSEDITORLANG; } else { $EDLANG = i18n_r('CKEDITOR_LANG'); }
        if (defined('GSEDITORTOOL')) { $EDTOOL = GSEDITORTOOL; } else { $EDTOOL = ''; }
        if (defined('GSEDITOROPTIONS') && trim(GSEDITOROPTIONS)!="") { $EDOPTIONS = GSEDITOROPTIONS.","; } else { $EDOPTIONS = ''; }

        if ($EDTOOL == 'advanced') {
                $toolbar = "['Bold', 'Italic', 'Underline', 'NumberedList', 'BulletedList', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', 'Table', 'TextColor', 'BGColor', 'Link', 'Unlink', 'Image', 'RemoveFormat', 'Source'],
                '/',
                ['Styles','Format','Font','FontSize']";
        } elseif ($EDTOOL == 'basic') {
                $toolbar = "['Bold', 'Italic', 'Underline', 'NumberedList', 'BulletedList', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', 'Link', 'Unlink', 'Image', 'RemoveFormat', 'Source']";
        } else { $toolbar = GSEDITORTOOL; }

        if (defined('GSEDITORTOOL')) { $toolbar = 'toolbar :['.$toolbar.'],'; }
        else { $toolbar = ''; }
                        
?>

<?php if ($HTMLEDITOR != '') { ?>
        <script type="text/javascript" src="template/js/ckeditor/ckeditor.js"></script>

        <script type="text/javascript">
                        
        var editor = CKEDITOR.replace( 'post-content', {
                        forcePasteAsPlainText : true,
                        language : '<?php echo $EDLANG; ?>',
                        defaultLanguage : 'en',
                        <?php if (file_exists(GSTHEMESPATH .$TEMPLATE."/editor.css")) { 
                                $fullpath = suggest_site_path();
                        ?>
                        contentsCss: '<?php echo $fullpath; ?>theme/<?php echo $TEMPLATE; ?>/editor.css',
                        <?php } ?>
                        entities : false,
                        height: '<?php echo $EDHEIGHT; ?>',
                        baseHref : '<?php echo $SITEURL; ?>',
                        <?php echo $toolbar; ?>
                        <?php echo $EDOPTIONS; ?>
                        tabSpaces:10,
                        filebrowserBrowseUrl : 'filebrowser.php?type=all',
                        filebrowserImageBrowseUrl : 'filebrowser.php?type=images',
                        filebrowserWindowWidth : '730',
                        filebrowserWindowHeight : '500',
                        magicline_color : '#CF3805',
                        allowedContent  : true // disable acf                                   
        });


CKEDITOR.instances["post-content"].on("instanceReady", InstanceReadyEvent);

function InstanceReadyEvent(ev) {
        _this = this;
        this.document.on("keyup", function () {
                $('#editform #post-content').trigger('change');
                _this.resetDirty();
        });

        this.timer = setInterval(function(){trackChanges(_this)},500);
}               

/**
 * keep track of changes for editor
 * until cke 4.2 is released with onchange event
 */
function trackChanges(editor) {
        // console.log('check changes');
        if ( editor.checkDirty() ) {
                $('#editform #post-content').trigger('change');
                editor.resetDirty();                    
        }
};

</script>

 

Konfiguration von CKE 4.1

Es sind zwar Editor-Optionen in gsconfig.php vorgesehen, aber ich bevorzuge diese Änderungen dort zu machen, wo sie hingehören: …\getsimple\admin\template\js\ckeditor\config.js
Diese Datei wird nur in einer sehr rudimentären Form ausgeliefert: 

/**
 * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.html or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function( config ) {
        // Define changes to default configuration here. For example:
        // config.language = 'fr';
        // config.uiColor = '#AADC6E';
};

Die Dokumentation der Konfigurationsparameter sind nachzulesen unter: http://docs.ckeditor.com/#!/api/CKEDITOR.config

Die mit GetSimple 3.2.0 und auch GetSimple 3.2.1 ausgelieferte Datei schränkt die Funktion bzw. Möglichkeiten der Änderungen von Links und Images unnötig ein. Daher bevorzuge ich die nachfolgenden Einstellungen: 

CKEDITOR.editorConfig = function( config ) {
        // Define changes to default configuration here.
        //config.resize_dir = 'vertical'; // vertical resize
        config.toolbarCanCollapse = true; // hide/show toolbar collapse button
        config.skin = 'kama';
        config.uiColor = '#8080E0'; // helles blau
        config.language = 'de';
        config.emailProtection = 'encode';

        // Default setting. rearranged
        config.toolbarGroups = [
    { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
    { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
    { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
    { name: 'forms' }, { name: 'insert' },
    '/',
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
    { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align' ] },
    { name: 'links' },
    // 'insert' war hier
    '/',
    { name: 'styles' },
    { name: 'colors' },
    { name: 'tools' },
    { name: 'others' },
    { name: 'about' }
];
};

CKEDITOR.on( 'dialogDefinition', function( ev ) {
                var dialogName = ev.data.name;
                var dialogDefinition = ev.data.definition;
                ev.data.definition.resizable = CKEDITOR.DIALOG_RESIZE_NONE;

                if ( dialogName == 'link' ) {
                        var infoTab = dialogDefinition.getContents( 'info' );
                        var advTab = dialogDefinition.getContents( 'advanced' );
                        advTab.remove( 'advLangDir' );
                        advTab.remove( 'advLangCode' );
                        advTab.remove( 'advContentType' );
                        advTab.remove( 'advCharset' );
                }
});

Deutsche Sprachdatei:

Folgende Zeilen haben gefehlt: 

  , "PAGE_UNSAVED"      =>  "Seite hat ungesicherte Änderungen"
  , "PLUGIN_DISABLED"   => "Plugin deaktiviert"

[karamo]