CKEditor

Drupal 8

Tipy:

  • activelamp.com/blog/drupal/drupal8-ckeditor-plugin

Drupal 7

Umožňuje nahradit textová pole CKEditorem (WYSIWYG editor pro vkládání textového, grafického a multimediálního obsahu), který je novou generací FCKEditoru.

CKEditor je funkční v prohlížečích Internet Explorer 6.0+, FireFox 3.0+, Safari 4.0+, Opera 9.5+, Google Chrome, Camino 1.0+ se zapnutou podporou JavaScriptu.

Některé výhody:

  • validní víceúrovňové odrážky a číslování
  • (X)HTML výstup
  • přehledný zdrojový kód
  • kontrola pravopisu při psaní

Zjištěné nedostatky verze CKEditor 6.x-1.0 oproti modulu FCKeditor 6.x-2.1:

  • pomocí modulu Image Assit není možné do obsahu vložit obrázek (obrázek je možné vložit pouze po přepnutí do textového editoru)

Univerzálnější řešení nabízí modul WYSIWYG.

Přechod z FCKEditoru

Při instalaci CKEditor provádí kontrolu existence modulu FCKeditor. Pokud je modul FCKEditor pouze vypnut a není odinstalován, převezme CKEditor všechna nastavení, profily atd.

Po instalaci CKEditoru je možné modul FCKeditor odinstalovat. Pokud jsou povoleny oba moduly současně, dojde k chybě, protože se oba pokusí připojit ke stejnému textovému poli.

Instalace a nastavení

  1. Volitelně nainstalujte modul IMCE.
  2. Rozbalte modul CKeditor 7.x-1.13 do adresáře sites/all/modules/.
    • k instalaci můžete využít i Drush příkazy
    • drush dl ckeditor
      drush en -y ckeditor
      drush ckeditor-download
      drush cc all
  3. Rozbalte archiv CKEeditor 3.6.6.1 (verzi 4.4.0 nedoporučuji no) a zkopírujte obsah adresáře ckeditor (adresáře _samples_source je z bezpečnostních důvodů vhodné vynechat/smazat) do adresáře sites/all/libraries/ckeditor/ (nebo do sites/all/modules/ckeditor/ckeditor/).
  4. V admin/modules (Moduly) modul povolte.
  5. V admin/config/content/ckeditor (Konfigurace, Content Authoring, CKEditor) je možné upravit výchozí nastavení CKEditoru:
    • Profily (upravte u všech uživatelských profilů):
      • v sekci Základní nastavení (Basic setup):
        • zvolte požadované Formáty textu (Input formats)
      • (v sekci Visibility settings)
        • (minimum rows: 3 - editor se zobrazí pouze u textových polí s více než uvedeným počtem řádků)
      • v sekci Vzhled Editoru můžete upravit vzhled:
        • Panel nástrojů:
          • Pokročilé
            • [
                ['Format', 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', 'Outdent', 'Indent', '-', 'Link', 'Unlink']
              ]
              
          • Úplné
            • v sekci Panel nástrojů je možné kliknutím "přednačíst" výchozí rozložení tlačítek (Základní, Pokročilé, Celé) enlightened
            • kromě jednotlivých tlačítek je také možné "přetáhnout" celou lištu s tlačítky enlightened
            • [
                ['Source'],
                ['Cut', 'Copy', 'PasteText'],
                ['Undo', 'Redo', '-', 'RemoveFormat'],
                ['Image', 'Table', 'HorizontalRule', 'Smiley'],
                ['Link', 'Unlink', 'Anchor', 'Linkit', 'LinkToNode', 'LinkToMenu'],
                ['Maximize'],
                '/',
                ['Format'], 
                ['Bold', 'Italic', 'Strike', '-', 'Subscript', 'Superscript'],
                ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
                ['JustifyLeft', 'JustifyCenter', 'JustifyRight'],
                ['DrupalBreak', 'DrupalPageBreak', 'NodeEmbed']
              ]
              
              • další volitelná tlačítka
                • 'Templates', 'SpellChecker', 'Replace', 'SelectAll'
                  'IMCE', 'Flash', 'MediaEmbed', 'CpecialChar'
                  'ShowBlocks', 'About', 'Styles', 'BGColor', 'JustifyBlock'
                  'Paste','PasteFromWord', 'Scayt', 'Find', 'BidiRtl','BidiLtr',
              • U Full HTML filtru v sekci Plugins povolte:
                • Plugin for inserting Drupal teaser and page break
                • (IMCE Window button in toolbar)
                • (MediaEmbed button in toolbar)
                • Tableresize plugin
        • Jazyk: Czech
      • v sekci Filtrování a výstup (Cleanup and output) můžete nastavit chování editoru:
        • Font formats: p;div;pre;address;h2;h3;h4;h5;h6
        • pomocí Custom formatting options je možné upravit vzhled HTML zdroje např. zvolte Ano a povolte:
          • Indent the element contents
          • Break line before the opening tag
          • Break line after the closing tag
          • Indent the <pre> element contents
      • v sekci CSS
        • Editor CSS: Use theme css nebo Define CSS (pokud je pro administraci použito jiné téma než pro vzhled)
        • Predefined styles: Define path to ckeditor.styles.js
        • Predefined styles path: %hsites/all/themes/ckeditor.styles.js
      • v sekci File browser settings je možné zvolit způsob procházení a nahrávání souborů:
        • IMCE
        • Web File Manager
        • Image Browser
        • CKFinder – komerční produkt (zdarma pouze pro účely testování)
      • v sekci Pokročilé volby:
        • povolte Force Pasting as plain text (vnutit vkládání obsahu schránky jako čistý text)
        • HTML Entities: Ne (nevkládat HTML entity)
        • (Spell checker: Ano - čeština kontrolována pouze u prohlížeče FireFox)
        • Custom JavaScript Configuration (případně upravit soubor ckeditor.config.js viz níže)
          • config.bodyClass = 'wysiwyg';
            config.basicEntities = false; //Disable auto include basic HTML entities: nbsp, gt, lt, amp (IE8 issues)
            config.allowedContent = true; //enable CLASS, SPAN, IFRAME etc. in content
    • V případě potřeby upravite nastavení vstupních formátů.
    • Upravte konfigurační soubor sites/all/modules/ckeditor/ckeditor.config.js dle potřeby (documentation, developers documentation):
      • dle potřeby můžete upravit CSS třídy vkládané tlačítky pro zarovnávání:
        config.justifyClasses = [ 'left', 'center', 'right', 'justify' ];
      • dle potřeby je možné vytvořit vlastní šablony:
      • config.templates_files = [
          //'/sites/all/libraries/ckeditor/plugins/templates/templates/default.js',
          '/sites/all/themes/wysiwyg/ckeditor.templates.js' 
        ];
      • dle potřeb můžete změnit výchozí nastavení viz CKEditor Documentation:
        • vlastní smajlíky ???:
          • zkopírujte obsah adresáře sites/all/modules/ckeditor/ckeditor/plugins/smiley/images/ do vlastní složky se smajlíky např. files/pictures/smileys/ nebo použijte vlastní např. msn smileys:
          • config.smiley_path = + 'plugins/smiley/images/';
            // config.smiley_path = '/sites/default/files/pictures/smileys/';
            //config.smiley_path = '/system/files/pictures/smileys/';
            config.smiley_descriptions = [
              ':)', ':(', ';)', ':D', ':/', ':P',
              ':$', ':o', ':|', ':@', '(A)', '(H)',
              '(6)', ';(', '(I)', '(N)', '(Y)', '(L)',
              '(U)', ':kiss', '(E)' ];
            config.smiley_images = [
             'regular_smile.gif', 'sad_smile.gif', 'wink_smile.gif', 'teeth_smile.gif', 'confused_smile.gif', 'tounge_smile.gif',
            'embaressed_smile.gif', 'omg_smile.gif', 'whatchutalkingabout_smile.gif', 'angry_smile.gif', 'angel_smile.gif', 'shades_smile.gif',
            'devil_smile.gif', 'cry_smile.gif', 'lightbulb.gif', 'thumbs_down.gif', 'thumbs_up.gif', 'heart.gif',
            'broken_heart.gif', 'kiss.gif', 'envelope.gif'];
            
      • po změně tohoto souboru vyčistěte cache prohlížeče
    • Výchozí styly elementů a atributů CKEditoru je možné provést v souboru sites/all/modules/ckeditor/ckeditor.styles.js (pomocí rozbalovacího seznamu je možné styly aktivovat, deaktivovat a kombinovat):
      /* My Styles */
      {name: 'Image Alone', element: 'img', attributes: {'class': 'alone'}},
      {name: 'Float Left', element: 'div', attributes: {'class': 'f-left'}},
      {name: 'Float Right', element: 'div', attributes: {'class': 'f-right'}},
      {name: 'Clear (p)', element: 'p', attributes: {'class': 'clear'}},
      
    • Vzhled CKEditoru je možné upravit pomocí svého tématu vzhledu např.:
      /* CKEditor */
      .cke_panel_listItem a {
        color: #000;
        background-color: #fff;
        text-decoration: none;
        font-size: 80%;
      }
      .cke_panel_listItem.cke_selected a {
       
      }
      /* config.bodyId = 'wysiwyg' in file ckeditor.config.js */
      .wysiwyg {
        color: #000;
        background-color: #fff;
        background-image: none;
      }
      .wysiwyg .left {text-align: left;}
      .wysiwyg .center {text-align: center;}
      .wysiwyg .right {text-align: right;}
      .wysiwyg .justify {text-align: justify;}
    • Výchozí hodnoty editoru je možné upravit v sites/all/libraries/ckeditor/plugins/
      • např. pro tabulku v souboru table/dialogs/table.js je možné zakomentovat (odstranit) zvýrazněné nastavení:
        • label:e.lang.common.width,'default':500,
        • label:e.lang.table.cellSpace,'default':1,
        • label:e.lang.table.cellPad,'default':1,
        • id:'txtBorder','default':1,
    • (Pokud se vám nezobrazuje editor u vlastního profilu, zmenšete minimální počet řádků viz issue735028#59.)
  6. Při editaci popisů termínů taxonomie je vhodné CKEditor zakázat, neboť se popis termínu ve výchozím stavu zobrazuje jako toooltip při najetí myši a neměl by tedy obsahovat HTML entity
    • enlightened ve verzi CKEditor 7.x-1.13 je tedy vhodné aplikovat patch 1036020#7 (rozšířené možnosti  include/exclude, které obsahovala verze 6.x jsou plánovány až od verze 7.x-2.x)

Pokud používáte modul CKEditor (FCKeditor) je doporučeno pro lepší kontrolu nad konci řádků vypnout u všech vstupních formátů, kde se bude CKEditor používat filtr Převést odřádkování do HTML (tj. <br> a <p>)enlightened

Další moduly:

  • Wysiwyg API template plugin
  • Page Preview
  • Edit – "inline" editace (součást Drupalu 8) | Aloha – užitečný a velmi rychlý "inline" wysiwyg editor
  • Linkit
  • IMCE
  • CKEditor Link
  • Web File Manager
  • ImageBrowser
  • Paging
  • Better Formats - mimo jiné umožňuje zvolit výchozí vormát pro určitý typ obsahu
  • možnosti editace, které nejsou založeny na iframe:
    • Reviser + Media Manager: umožňuje přetahovat zobrazené obrázky do textu
    • content editable
  • Syntax highlighter
  • Media CKEditor

Konfigurace:

  • ckeditor.com/latest/samples/plugins/toolbar/toolbar.html
    • config.removeButtons = 'Underline,Strike,PasteText,PasteFromWord,Image,RemoveFormat';
  • docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-entities_latin
    • config.entities_latin = false;
  • docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-forcePasteAsPlainText
    • config.forcePasteAsPlainText = true;
  • docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.contentsCss
    • config.contentsCss = ['global.css', 'editor.css'];
    • config.contentsCss = [
        'framework/bootstrap/css/bootstrap.min.css', 
        'font/akronim-regular/stylesheet.css',
        'font/poiretone-regular/stylesheet.css',
        //'font/font-awesome/css/font-awesome.min.css',
        'design/global.css'
      ];
  • docs.ckeditor.com/#!/guide/dev_format
    • config.format_tags = 'p;h1;h2;h3;pre;address;div';
  • Simplify the dialog windows (volitelně)
    • config.removeDialogTabs = 'image:advanced;link:advanced';
  • docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.stylesSet
    • docs.cksource.com/ckeditor_api/symbols/CKEDITOR.stylesSet.html
    • docs.ckeditor.com/#!/guide/dev_styles
    • config.stylesSet = [
        { name : 'Psací stroj', element : 'tt' }, // Typewriter
        { name : 'Počítačový kód', element : 'code' }, // Computer Code
        { name : 'Klávesová zkratka', element : 'kbd' }, // Keyboard Phrase
      //  { name : 'Jednoduchý text', element : 'samp' }, // Simple text
      //  { name : 'Proměnná', element : 'var' }, // Variable
        { name : 'Odstraněný text', element : 'del' }, // Deleted text
        { name : 'Vložený text', element : 'ins' }, // Inserted text
      //  { name : 'Citace (Cited work)', element : 'cite' },
        { name : 'Řádková citace', element : 'q' }
      ];
  • docs.ckeditor.com/#!/guide/dev_sourcearea

Rozšíření:

  • ckeditor.com/addon/justify
    • config.extraPlugins = 'justify';
      config.justifyClasses = [ 'text-left', 'text-center', 'text-right', 'text-justify' ];
  • ckeditor.com/addon/textselection
    • config.extraPlugins = 'textselection';
  • ckeditor.com/addon/nbsp (Non-breaking Space)
    • //config.extraPlugins = 'nbsp';
  • ckeditor.com/addon/wordcount + ckeditor.com/addon/notification (require WordCount)
    • config.extraPlugins = 'wordcount,notification';
      config.wordcount = {
         showParagraphs: false,
         showWordCount: true,
         showCharCount: true,
         countSpacesAsChars: false,
      };
  • docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-skin
    • config.extraAllowedContent = 'dl dt dd span';
      config.allowedContent = true
  • ckeditor.com/addon/codemirror
    • config.extraPlugins = 'codemirror';
    • docs.ckeditor.com/#!/guide/dev_output_format
    • get-simple.info/forums/showthread.php?tid=3686&pid=37029#pid37029
    • (ckeditor.com/addon/htmlwriter)
    • CKEDITOR.on('instanceReady', function(ev) {
        var blockTags = ['div','h1','h2','h3','h4','h5','h6','p','pre','blockquote','ul','ol','table','thead','tbody','tfoot','td','th'];
        var rules = {
          indent : true,
          breakBeforeOpen : true,
          breakAfterOpen : false,
          breakBeforeClose : false,
          breakAfterClose : false
        };
        for (var i=0; i<blockTags.length; i++) {
          ev.editor.dataProcessor.writer.setRules(blockTags[i], rules);
        }
      });
      CKEDITOR.on('instanceReady', function(ev) {
        var blockTags = ['li'];
        var rules = {
          indent : true,
          breakBeforeOpen : true,
          breakAfterOpen : false,
          breakBeforeClose : false,
          breakAfterClose : true
        };
        for (var i=0; i<blockTags.length; i++) {
          ev.editor.dataProcessor.writer.setRules(blockTags[i], rules);
        }
      });
  • ckeditor.com/addon/youtube
    • //config.extraPlugins = 'youtube'; // vypina codemirror
      //config.youtube_autoplay = true;
  • ckeditor.com/addon/oembed
    • //config.extraPlugins = 'widget';
      //config.extraPlugins = 'lineutils';
      //config.extraPlugins = 'oembed';

Tip:

  • ace.c9.io – embeded JavaScript editor