CKEditor

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í

Volitelně nainstalujte modul IMCE.
Rozbalte modul CKeditor 7.x-1.2 do adresáře sites/all/modules/.
Rozbalte archiv CKEeditor 3.4+ a zkopírujte obsah adresáře ckeditor (adresáře _samples a _source je možné vynechat) do adresáře sites/all/libraries/ckeditor/ (nebo do sites/all/modules/ckeditor/ckeditor/).
V admin/modules (Moduly) modul povolte.
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 Basic setup:
    - zvolte 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 Editor appearance můžete upravit vzhled:
    - Panel nástrojů:
      - Filtered HTML
        
        [ ['Source','-','Templates'], ['Cut','Copy', 'Paste', '-', 'SpellChecker'], ['Undo', 'Redo', '-', 'Replace', '-', 'SelectAll','RemoveFormat'], ['Smiley', 'SpecialChar'], ['Link', 'Unlink', 'LinkToNode', 'LinkToMenu'], ['Maximize', 'ShowBlocks'], '/', ['Styles', 'Format'], ['Bold', 'Italic', '-', 'Subscript', 'Superscript'], ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'], ['JustifyLeft', 'JustifyCenter', 'JustifyRight'], ['DrupalBreak', 'DrupalPageBreak'] ]
      - Full HTML
        
        [ ['Source', '-', 'Templates'], ['Cut', 'Copy', 'Paste', '-', 'SpellChecker'], ['Undo', 'Redo', '-', 'Replace', '-', 'SelectAll', 'RemoveFormat'], ['Image' ,'IMCE', 'Flash', 'MediaEmbed', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar'], ['Link', 'Unlink', 'Anchor', 'Linkit', 'LinkToNode', 'LinkToMenu'], ['Maximize', 'ShowBlocks', '-', 'About'], '/', ['Styles', 'Format'], ['BGColor'], ['Bold', 'Italic', '-', 'Subscript', 'Superscript'], ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'], ['JustifyLeft', 'JustifyCenter', 'JustifyRight'], ['DrupalBreak', 'DrupalPageBreak', 'NodeEmbed'] ]
        
        další volitelná tlačítka
        
        'PasteText','PasteFromWord',
        'Scayt',
        'Find',
        'Underline','Strike',
        'JustifyBlock','-','BidiRtl','BidiLtr',
        
        U Full HTML filtru v sekci Plugins povolte:
        
        Teaser Break button in toolbar
        
        IMCE Window button in toolbar
        
        MediaEmbed button in toolbar
        
        Tableresize plugin
    - Jazyk: Czech
  - v sekci Cleanup and output můžete nastavit chování editoru:
    - Font formats: p;div;pre;address;h2;h3;h4;h5;h6
    - pomocí Use custom formatting options je možné upravit vzhled HTML zdroje např. povolte:
      - indent the element contents
      - break line before the opener tag
      - break line after the closer 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 (nev
    - Spell checker: Ano (čeština kontrolována pouze u prohlížeče FireFox)
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' ];
```
vzhled editoru je možné pohodlněji upravovat doplněním identifikátoru popřípadě i třídy např.:
```
config.bodyClass = 'wysiwyg';
```
vzhledem k chování IE8, který spojuje slova do jednoho dlouhého "nezlomitelného" řádku je vhodné zakázat automatické vkládání pevných mezer
- ```
/* Disable basic HTML entities: nbsp, gt, lt, amp */
config.basicEntities = false;
```

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.

Další moduly:

IMCE
CKEditor Link
Web File Manager
ImageBrowser
Paging
Better Formats
možnosti editace, které nejsou založeny na iframe:
- Reviser + Media Manager: umožňuje přetahovat zobrazené obrázky do textu
- content editable

Přidat komentář
2766x přečteno

Tomáš Daněk

CKEditor

Přechod z FCKEditoru

Instalace a nastavení

Příbuzný obsah

Zpětné odkazy