Anleitung CKEditor tunen

Thema wurde von sirtet, 12. Dezember 2014 erstellt.

  1. sirtet

    sirtet Erfahrener Benutzer

    Registriert seit:
    4. Juli 2012
    Beiträge:
    1.117
    Danke erhalten:
    88
    Danke vergeben:
    88
    Seit dem Update auf GX2.1 gibt's ja den CKEditor. Darauf hab ich mich schon lange gefreut, um zwei CKEditor Plugins nutzen zu können:

    http://ckeditor.com/addon/textselection
    und
    http://ckeditor.com/addon/codemirror

    Beide erleichtern die Arbeit, wenn man in den Quellcode-Modus umschaltet:
    Textselection synchronisiert Cursoposition, Markierung und Viewport beim Umschalten WYSIWYG<>Quellcode, so dass man sofort weiterarbeiten kann, wo man grad war.

    codemirror bringt Zeilennummern, Syntax-Coloring, Autocomplete, etc. in den Quellcode, so dass man sich nochmals schneller zurechtfindet.

    [​IMG]

    Die Installation ist super einfach, einfach wie beschrieben in den plugin-Ordner (admin/includes/ckeditor/plugins/) kopieren, und in der config.js (admin/includes/ckeditor/config.js) aktivieren, z.B. am Ende, vor der letzten Klammer:
    Code:
        config.extraPlugins = 'textselection,codemirror';
    };
    Jetzt möchte ich nur noch wissen, wie das updatesicher gemacht werden kann :confused: ... Jemand?
     

    Anhänge:

  2. Wilken (Gambio)

    Wilken (Gambio) Erfahrener Benutzer

    Registriert seit:
    7. November 2012
    Beiträge:
    18.737
    Danke erhalten:
    7.309
    Danke vergeben:
    2.208
    Ich glaube Updatesicherheit ist dafür bei uns noch nicht bedacht worden, aber die Datei dürfte immerhin nicht oft durch Updates angefasst werden. Eine kurze Recherche ergab auch, dass es scheinbar keine Möglichkeit gibt benutzerspezifische "Teilkonfigurationsdateien" nach Vorhandenheit zu laden, also kommen wir da auch nicht so ganz leicht raus. Ich fürchte du musst vorläufig darauf achten deine Konfigurationsdatei nicht zu überschreiben, bis sich etwas besseres finden lässt.
     
  3. sirtet

    sirtet Erfahrener Benutzer

    Registriert seit:
    4. Juli 2012
    Beiträge:
    1.117
    Danke erhalten:
    88
    Danke vergeben:
    88
    Das wäre doch aber etwas, wenn man seinen Editor anpassen könnte. Schliesslich braucht kaum einer ALLE der Buttons, die ihr aktiviert.
    Da könnte man einiges übersichtlicher trimmen, in den jeweiligen Installationen.

    PS:
    Irgendwie geht das schon, in Drupal verwende ich den Editor auch, und da kann man Teilkonfigs sogar im User UI machen, was in der DB installiert wird. Und auch das Hinzufügen von editor-plugins ist möglich.
    https://www.drupal.org/project/ckeditor
     
  4. Senior

    Senior Erfahrener Benutzer

    Registriert seit:
    17. April 2013
    Beiträge:
    816
    Danke erhalten:
    178
    Danke vergeben:
    241
    Ich möchte gerne den CKEditor mit einem Youtube-Plugin pimpen.
    Integration sieht auch nicht zu schwer aus - allerdings wohl doch für mich.

    Nach dem Einfügen beider Zeilen
    Code:
    config.extraPlugins = 'youtube';
    config.toolbar = [{ name: 'insert', items: ['Image', 'Youtube']}];
    
    am Ende (vor der letzten geschweiften Klammer der config.js) erscheint der Editor nur noch mit dem neuen Youtube- und dem (alten?) Bild-einfügen-Button :(
    Alle Caches natürlich geleert.
    Oder gehört die 2. Zeile in eine andere Datei? Das ist für mich nicht eindeutig beschrieben.

    Kann mir vieleicht jemand den Pfad der Tugend aufzeigen?
     
  5. sirtet

    sirtet Erfahrener Benutzer

    Registriert seit:
    4. Juli 2012
    Beiträge:
    1.117
    Danke erhalten:
    88
    Danke vergeben:
    88
    @Senior, das ist zwar schon eine alte Frage, und ich weiss die definitive Antwort nicht.
    Aber offensichtlich überschreibst du die config.toolbar statt sie zu ergänzen. Entweder du schreibst da alle Buttons rein die du willst, (ah, so könnte ich meinen eigenen Editor entschlacken), oder du findest raus, wie man das ERGàNZT statt überschreibt, vielleicht so wie man strings anhängt, mit .= statt nur = Bin grad nicht genug tief im Thema um zu verstehen ob config.toolbar ein Array, Objekt, oder was für Typ Variable ist... Darauf kommt's wohl an wie das zu machen ist.

    Oder hast du das schon gelöst? Wie?
     
  6. Senior

    Senior Erfahrener Benutzer

    Registriert seit:
    17. April 2013
    Beiträge:
    816
    Danke erhalten:
    178
    Danke vergeben:
    241
    Hallo sirtet,
    ich habe es damals aufgegeben und hätte nie gedacht dass hier noch jemand antwortet. :)
    Wäre sehr nice-to-have aber ich habe zu wenig Grundwissen.
    In der config.js werden ja schon alle Elemente definiert.

    Code:
    /**
     * @license Copyright (c) 2003-2014, 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 the complete reference:
        // http://docs.ckeditor.com/#!/api/CKEDITOR.config
    
        // The toolbar groups arrangement, optimized for two toolbar rows.
        config.toolbarGroups = [
            { name: 'document',       groups: [ 'mode', 'document', 'doctools' ] },
            { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
            { name: 'insert' },
            { name: 'others' },
            { name: 'links' },
            { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
            { name: 'forms' },
            { name: 'about' },
            { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
            { name: 'colors' },
            { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
            { name: 'styles' },
            { name: 'tools' }
        ];
    
        // Remove some buttons, provided by the standard plugins, which we don't
        // need to have in the Standard(s) toolbar.
        //config.removeButtons = 'Underline,Subscript,Superscript';
    
        // Se the most common block elements.
        config.format_tags = 'div;p;h1;h2;h3;pre';
    
        config.allowedContent = true;
    
        // Make dialogs simpler.
        // config.removeDialogTabs = 'image:advanced;link:advanced';
    
        config.toolbar_Basic = [
            ['PasteFromWord','Link', 'Unlink', '-', 'Image','Flash','SpecialChar','HorizontalRule'],
            '/',
            ['Font','FontSize'],
            '/',
            ['TextColor','BGColor'],['Source'],
            '/',
            ['Bold','Italic','Underline','Strike', '-', 'SelectAll','RemoveFormat'],
            '/',
            ['NumberedList','BulletedList','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','Maximize']
        ];
    
        config.toolbar_ImageMapper = [
            ['Link', 'Unlink'],
            ['Image','Table','SpecialChar'],
            ['Font','TextColor','BGColor'],
            ['FontSize','Source','PasteFromWord'],
            ['Bold','Italic','Underline','Strike','-','SelectAll','RemoveFormat'],
            ['NumberedList','BulletedList','Outdent','Indent','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','Maximize']
            
            config.toolbar = [{ name: 'insert', items: ['Image', 'Youtube']}];
            
        ];
    
        config.enterMode = CKEDITOR.ENTER_BR;
        config.shiftEnterMode = CKEDITOR.ENTER_P;
        config.smiley_admin_path = '../images/icons/smileys/';
        config.smiley_path = 'images/icons/smileys/';
        config.protectedSource.push(/\{[\s\S]*?\}/g);
        config.extraPlugins = 'showprotected';
    };
    
    Das hinzufügen der beiden Zeilen hat zu o.g. Ergebnis geführt.