CKEditor 4.0.2 Update

[karamo]

Hallo an alle Update-willigen, die nicht auf GetSimple v3.3 warten wollen !!!

EDIT: Mittlerweile gibt es die vollständigen Informationen hier:
http://www.get-simple.de/editor-update/e...ersion-41/

Hier ist die Zusammenfassung der erforderlichen Änderungen.
EDIT: Wie ich gerade erfahren habe, ist CKE 4.1 bereits im dev-branch von GS v3.3 vorgesehen. Ich kann das aber nicht nachvollziehen bzw. finden, und daher meine Lösung hier für GS v3.2. /EDIT
EDIT2: Ich habe noch weitere Vereinfachungen vorgenommen. /EDIT2

Die Voraussetzungen und die Aufgabenstellung waren folgende:
Ausgangsstatus:
GetSimple v3.2.0 mit CKEditor v3.6.2
Ziel:
Update auf CKEditor v4.x

Es waren folgende Punkte zu behandeln:

1. Editor-Fenster mit Toolbar sichtbar und verwendbar
   
2. Skin auswählbar u.a. Konfigurationen
   
3. Änderungen erkennen
   

Schritt 1) Download von CKEditor v4.1 (Stand 1.4.2013) von Basic, Standard, Full Download
Die persönlich angepaßte Version unter Angepaßte Version funktioniert wegen des "Loaders" nicht !!! Keine Ahnung warum und ich habe es auch nicht nachverfolgt.


Schritt 2) Den gesamten Ast

Code:

...\getsimple\admin\template\js\ckeditor

ersetzen (unzip & upload to Server). Ggf. den Skin "kama" von hier http://ckeditor.com/addon/kama downloaden und ins Skin-Verzeichnis zusätzlich uploaden!


Schritt 3) Der CKEditor wird von GetSimple in edit.php aufgerufen. Daher ist diese Datei anzupassen.

Da der Skin "getsimple" nicht kompatibel mit CKEditor V4.x ist, kann nur der Skin "moono" (monochrom) oder "kama" (farbig) verwendet werden. Daher ist die fixe Zuordnung skin: 'getsimple', in edit.php zu entfernen, auszukommentieren oder zu ändern und uiColor einen anderen Wert zuzuweisen. (Beides ist in GS 3.2.1 bereits gemacht.)

Ebenso sind die Zeilen toolbar: ... und die Zeile mit $EDOPTIONS inkompatibel und daher auszukommentieren.
(Hier ist man nicht gewillt, den Fehler zu korrigieren - siehe daher obigen Link.)

Weiters ist die Erkennung von Änderungen in der für v3.6.2 nicht funktionsfähig, da Aktionen von der Toolbar nicht erkannt werden.
(Auch dieser Fehler wird noch nicht akzeptiert - siehe folgende Postings.)
Das Problem, Änderungen des (Editor)Inhaltes zu erkennen ist schon mehrmals beschrieben worden:
... links können nachgefragt werden ...
Ich habe auch das Sample "api.html" analysiert und bin zu folgendem Ergebnis gekommen:
Da es im CKEditor v4.1 (noch) keinen Event "change" gibt, aber die Funktion "checkDirty" ein brauchbares Ergebnis liefert, scheint es für mich am Einfachsten zu sein, diese Funktion periodisch (alle 200ms) aufzurufen.

Zusammengenommen sind daher folgende Änderungen durchzuführen:
edit.php - original für v3.6.2:

Code:

    var editor = CKEDITOR.replace( 'post-content', {
                skin : 'getsimple',
          ... ... ...
                uiColor : '#FFFFFF',
          ... ... ...
                toolbar :
                [
                <?php echo $toolbar; ?>
                ] */
                <?php echo $EDOPTIONS; ?>,    
          ... ... ...
    });
    CKEDITOR.instances["post-content"].on("instanceReady", InstanceReadyEvent);
    function InstanceReadyEvent() {
        this.document.on("keyup", function () {
            $('#editform #post-content').trigger('change');
        });
    }

geändert für v4.1:

Code:

    var editor = CKEDITOR.replace( 'post-content', {
                skin : 'kama',
          ... ... ...
                uiColor : '#8080E0',
          ... ... ...
                /*
                toolbar :
                [
                <?php echo $toolbar; ?>
                ] */
                <?php echo $EDOPTIONS; ?>,
                */
          ... ... ...
    });
    // The instanceReady event is fired,
    // when an instance of CKEditor has finished its initialization.
    CKEDITOR.on( 'instanceReady', function( ev ) { editor = ev.editor; });

    var timer = setInterval(function(){checkChanged()},200);

    function checkChanged() {
        if ( CKEDITOR.instances["post-content"].checkDirty() ) {
            $('#editform #post-content').trigger('change');
        }
    };

Möglicherweise sind dadurch andere Üerprüfungen auf Änderungen hinfällig geworden !?!?

Natürlich müssen die Verzeichnisse:

Code:

... \getsimple\admin\template\js\ckeditor\skins\kama
... \getsimple\admin\template\js\ckeditor\skins\moono

mit entsprechendem Inhalt vorhanden sein !!!


Schritt 3) Die Anpassungen des CKEditors in der gsconfig.php haben Priorität vor den Einstellungen in:

Code:

    ...\getsimple\admin\template\js\ckeditor\config.js

Ich empfehle aber, die Einstellungen in der config.js zu machen und nicht in der gsconfig.php !!!
Die möglichen Einstellungen sind in der CKE 4 Doku nachzulesen:
http://docs.ckeditor.com/# > Configuration Reference
Einige habe ich hier verwendet:

Code:

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' }
];
};

LG Wolfgang

PS: Please ask me if somebody needs english explanation.