FCKeditor

WYSIWYG editor pro vkládání textového, grafického a multimediálního obsahu.

FCKeditor je funkční v prohlížečích Internet Explorer 5.5+, FireFox 1.5+, Safari 3.0+, Opera 9.5+, Google Chrome, Camino 1.0+ a Mozilla 1.3+ 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í

Novou generací tohoto modulu je modul CKEditor (univerzálnější je modul WYSIWYG API).

Instalace a nastavení

  1. Rozbalte modul FCKeditor 6.x-2.0 do adresáře sites/all/modules/.
  2. Rozbalte archiv FCKeditor 2.6.6 a zkopírujte obsah adresáře fckeditor (adresář _samples je možné vynechat) do sites/all/modules/fckeditor/fckeditor/.
  3. V admin/build/modules (Administrace, Prvky webu, Moduly) modul povolte.
  4. V admin/user/permissions (Administrace, Uživatelé, Oprávnění) nastavte požadovaná oprávnění v sekci Modul fckeditor:
    • access fckeditor – každá povolená role může mít jiný typ editoru (DrupalBasic, DrupalFiltered, DrupalFull)
    • allow fckeditor file uploads
  5. V admin/settings/fckeditor (Administrace, Nastvení webu, FCKeditor) je možné upravit výchozí nastavení FCKeditoru:
    • Globální nastavení:
      • V sekci Visibility settings můžete omezit použití editoru např. zakázat editor při posílání e-mailových zpráv (contact), nastavování e-mailů (update status), vytváření webových formulářů (webform), překlad rozhraní a vlastní filtry (custom filter), editaci captcha testů (CAPTCHA Pack), cíle webu (pokud tuto proměnnou používáte současně i jako meta element v hlavičce dokumentu), moduly Lightbox2, Comment Mail:
        • do pole Fields to exclude/include přidejte:
          • Drupal 6
            edit-contact-form-information
            edit-message
            edit-update-notify-emails
            edit-webform-confirmation
            edit-webform-additional-validate
            edit-webform-additional-submit
            edit-extra-items
            edit-extra-description
            edit-value
            edit-extra-options
            edit-extra-questions
            edit-translations-cs
            edit-pattern
            edit-replacement
            edit-lost-character-captcha-word-pool-en
            edit-lost-character-captcha-word-pool-cs
            edit-site-mission
            edit-lightbox2-page-list
            edit-lightbox2-custom-trigger-classes
            edit-commentmail-mail-approve
            edit-commentmail-mail-notify
            edit-allowed-values
            edit-allowed-values-php
            edit-default-value-php-1
            edit-code
            
          • Drupal 5
            edit-contact-form-information
            contact-mail-user
            edit-message
            edit-notify-emails
            edit-webform-confirmation
            edit-webform-additional-validate
            edit-webform-additional-submit
            edit-extra-items
            edit-extra-description
            edit-value
            edit-extra-options
            edit-extra-questions
            edit-translations-cs
            edit-default-value-php
            edit-pattern
            edit-replacement
            edit-lost-character-captcha-word-pool-cs
            edit-lost-character-captcha-word-pool-en
            
    • Profily (upravte u všech uživatelských profilů):
      • V sekci Basic setup zvolte Roles allowed to use this profile
      • V sekci Editor appearance můžete zvolit vzhled:
        • Toolbar: DrupalBasic, DrupalFiltered nebo DrupalFull
        • Jazyk: CS
      • V sekci Cleanup and output můžete nastavit chování editoru:
        • Font formats: p;div;pre;address;h2;h3;h4;h5;h6
      • v sekci File browser settings je možné zvolit způsob procházení a nahrávání souborů:
        • Built-in file browser
        • IMCE
        • Web File Manager
        • Image Browser
  6. V případě potřeby upravite nastavení vstupních formátů.
  7. Upravte soubor sites/all/modules/fckeditor/fckeditor.config.js dle potřeb (Users Guide, Developers Guide):
    • dle potřeby můžete upravit CSS třídy vkládané tlačítky pro zarovnávání:
      FCKConfig.JustifyClasses = ['left','center','right','justify'] ;
    • u jednotlivých editorů můžete upravit zobrazení panelu nástrojů (pokud Vám tlačítko DrupalBreak (Teaser) nevyhovuje, můžete zakomentovat řádek s rozšířením 'drupalbreak'):
      FCKConfig.ToolbarSets['DrupalFull'] = [
        ['Source','-','Preview','-','Templates'],
        ['Cut','Copy','Paste','-','SpellCheck'],
        ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
        '/',
        ['Bold','Italic','-','Subscript','Superscript'],
        ['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],
        ['JustifyLeft','JustifyCenter','JustifyRight'],
        ['Link','Unlink','Anchor'/*,'LinkToNode', 'LinkToMenu'*/],
        ['Image','Flash','Table','Rule','Smiley','SpecialChar','DrupalBreak'/*, 'DrupalPageBreak'*/],
        '/',
        ['Style','FontFormat'],
        ['TextColor','BGColor'],
        ['FitWindow','ShowBlocks','-','About'] // No comma for the last row
      ] ;

      FCKConfig.ToolbarSets['DrupalBasic'] = [
      ['Source','-','Preview'],
      ['Bold','Italic','-','Subscript','Superscript'],
      ['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],
      ['JustifyLeft','JustifyCenter','JustifyRight'],
      ['Link','Unlink'],
      ['Smiley','SpecialChar','DrupalBreak'],
      ['FontFormat'] // No comma for the last row
      ] ;

      FCKConfig.ToolbarSets['DrupalFiltered'] = [
      ['Source','-','Preview'],
      ['Cut','Copy','Paste','-','SpellCheck'],
      ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
      '/',
      ['Bold','Italic','-','Subscript','Superscript'],
      ['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],
      ['JustifyLeft','JustifyCenter','JustifyRight'],
      ['Link','Unlink'/*,'LinkToNode', 'LinkToMenu'*/],
      ['Smiley','SpecialChar','DrupalBreak'/*, 'DrupalPageBreak'*/],
      '/',
      ['Style','FontFormat'],
      ['FitWindow','ShowBlocks'] // No comma for the last row
      ] ;

    • dle potřeb můžete změnit výchozí nastavení viz Configuration Options
      • vzhled editoru je možné pohodlněji upravovat doplněním identifikátoru popřípadě i třídy do elementu <body> fckeditoru např.:
        FCKConfig.BodyId = 'wysiwyg' ;
      • nevkládat HTML entity:
        FCKConfig.IncludeLatinEntities	= false ;
      • kontrolovat pravopis ve webovém prohlížeči Firefox:
        FCKConfig.FirefoxSpellChecker	= true ;
      • vnutit vkládání obsahu schránky jako čistý text
        FCKConfig.ForcePasteAsPlainText = true ;
      • vlastní smajlíky:
        • zkopírujte obsah adresáře sites/all/modules/fckeditor/fckeditor/editor/images/smiley/msn do vlastní složky se smajlíky např. files/images/smileys nebo použijte vlastní např. msn smileys:
          /* Smiley */
          FCKConfig.SmileyPath	= '/sites/default/files/images/smileys/';
          // FCKConfig.SmileyPath	= '/system/files/images/smileys/';
          FCKConfig.SmileyImages = ['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','really_happy.gif'] ;
          
      • po změně tohoto souboru vyčistěte cache prohlížeče
  8. Výchozí styly elementů a atributů FCKeditoru (pomocí rozbalovacího seznamu je možné styly aktivovat, deaktivovat a kombinovat) je možné upravit v souboru:

    • modules/fckeditor/fckeditor/fckconfig.js
      /* My Styles */
      FCKConfig.CustomStyles =
      {
        'Image Alone' : { Element: 'img', Attributes: {'class': 'alone'} },
        'Float Left' : { Element: 'div', Attributes: {'class': 'f-left'} },
        'Float Right' : { Element: 'div', Attributes: {'class': 'f-right'} },
        'Clear (p)' : { Element: 'p', Attributes: {'class': 'clear'} }
      };
      
    • případně v souboru fckstyles.xml

  9. Modul Image Assist je do FCKeditoru možné integrovat zkopírováním souboru img_assist_fckeditor.js z adresáře modules/fckeditor/ do modules/img_assist/.

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

Nahrávání souborů a vytváření složek

V adresáři files vytvořte podadresáře images, flashesmedia.

Neveřejný systém souborů
IMCE
  1. Naistalujte modul IMCE.
  2. V admin/settings/fckeditor (Administrace, Nastvení webu, FCKeditor) je možné upravit nastavení fckeditoru u jednolivých uživatelských profilů. U profilů DrupalFilteredDrupalFull:
    • V sekci File browser settings:
      • Zvolte File browser type: IMCE
      • Ve verzi Drupal 5:
        • Allow basic file management: false (při povolení zpřístupní záložku pro upload obrázků bez možnosti výběru složky)
          • Při výchozím nastavení do složky sites/default/files (níže je uvedena úprava cesty na sites/default/files/images).
        • Allow advanced file management: true – zpřístupní tlačítko pro výběr souborů ze serveru (upload souborů a vytváření složek).
Veřejný systém souborů
IMCE

Postup je stejný jako u neveřejného systému souborů.

Vestavný správce souborů

U souboru sites/all/modules/fckeditor/fckeditor/editor/filemanager/connectors/php/config.php si povolte oprávnění pro zápis a upravte (není třeba nastavovat při zapnutém modulu IMCE):

  • Povolte procházení souborů:
    • Jedna možnost (k souborům mají přístup "všichni"):
      $Config['Enabled'] = true;
    • ??? nebo bezpečnější způsob (k souborům mají přístup pouze uživatelé s nastaveným oprávněním uploadu):
      1. $drupal_path = "/../../..";
        if(!file_exists($drupal_path . '/includes/bootstrap.inc')) {
          $drupal_path = "../..";
          do {
            $drupal_path .= "/..";
            $depth = substr_count($drupal_path, "..");
            false;
          }
          while(!($bootstrapFileFound = file_exists($drupal_path
            .'/includes/bootstrap.inc')) && $depth<10);
        }
        if (!isset($bootstrapFileFound) || $bootstrapFileFound) {
          $cwd = getcwd();
          chdir($drupal_path);
          require_once './includes/bootstrap.inc';
          drupal_bootstrap(DRUPAL_BOOTSTRAP_FULL);
          $Config['Enabled'] = user_access('allow fckeditor file uploads');
          chdir($cwd);
        }
        $Config['Enabled'] = false ;
      2. V souboru sites/default/settings.php odkomentujte a nastavte:
        $cookie_domain = 'adresa.webu.com';
  • Nastavte relativní cestu k uživatelskému adresáři nebo řádek zakomentujte
    $Config['UserFilesPath'] = '/sites/default/files/';
  • Můžete nastavit i absolutní cestu k uživatelskému adresáři (pokud není absolutní cesta prázdná, musí se shodovat s relativní cestou):
    $Config['UserFilesAbsolutePath'] = '' ;
  • Sjednocení umístění nahrávaných souborů s modulem upload, který neumožňuje změnit výchozí složku (tj. přímo adresář sites/default/files):
    $Config['FileTypesPath']['File'] = $Config['UserFilesPath'] . '' ;
    $Config['FileTypesAbsolutePath']['File']=
      ($Config['UserFilesAbsolutePath'] == '') ? '' :
      $Config['UserFilesAbsolutePath'].'' ;
  • Pro zpřístupnění obrázků nahraných pomocí modulu image upravte výchozí složku pro obrázky z image na images:
    $Config['FileTypesPath']['Image'] = $Config['UserFilesPath']
      .'images/' ;
    $Config['FileTypesAbsolutePath']['Image']=
      ($Config['UserFilesAbsolutePath'] == '') ? '' :
      $Config['UserFilesAbsolutePath'].'images/' ;
  • Změna výchozí složky rychlého uploadu obrázků (Allow basic file management) z sites/default/files na sites/default/files/images:
    • upravte:
      $Config['QuickUploadPath']['Image'] = $Config['UserFilesPath'] ;
      $Config['QuickUploadAbsolutePath']['Image'] =
        $Config['UserFilesAbsolutePath'] ;
    • na:
      $Config['QuickUploadPath']['Image'] =
        $Config['FileTypesPath']['Image'] ;
      $Config['QuickUploadAbsolutePath']['Image'] =
        $Config['FileTypesAbsolutePath']['Image'] ;
  • Jen pro pořádek v systému adresářů upravte výchozí složku pro flash animace z flash na flashes:
    $Config['FileTypesPath']['Flash'] = $Config['UserFilesPath']
      .'flashes/' ;
    $Config['FileTypesAbsolutePath']['Flash']=
      ($Config['UserFilesAbsolutePath'] == '') ? '' :
      $Config['UserFilesAbsolutePath'].'flashes/' ;

Další moduly:

Překlad:

  • Allowed HTML tags: @tags
    • Povolené HTML značky: @tags
  • Switch to plain text editor
    • Přepnout do jednoduchého textového editoru
  • Switch to rich text editor
    • Přepnout do formátovacího textového editoru

Poznámky (úkoly do budoucnosti):

  • http://drupal.fckeditor.net/tricks#1
  • nastavit vlastní vzhled editoru viz styly (fckeditor/fckeditor/editor/skins/default)
  • posun v tabulce na další buňku
  • upravit vkládání tabulky (odstranit zbytečné atributy) a přidat <caption>
  • u obrázků zjednodušit vkládání (úpravu) atributu alt a title (sjednotit nebo umístit na jednu záložku)
  • u modulu fckeditor jsem nenašel talčítko (nebo rozšíření) na upload souborůmédií (ne obrázků ani flash animací), možná je to některá ze záložek
  • povolit klávesovou zkratku Ctrl+T (nová záložka prohlížeče) při editaci textu.

Konfigurace:

  • nastavení HTML zdroje:
    • /* HTML Source  */
      FCKConfig.FormatSource = true ;
      FCKConfig.FormatIndentator = ' ' ;
      FCKConfig.FormatOutput = true ;

  • Do sekce klávesových zkratek si např. můžete doplnit klávesové zkratky na zvýšení (TAB) a snížení (Shift+TAB) odsazení:
    [ SHIFT + 9 /*TAB*/, 'Outdent' ],
    [ 9 /*TAB*/, 'Indent' ],
  • Zachovat klávesovou zkratku CTRL+TAB operačního systému (nezobrazovat zdroj obsahu):
    [ CTRL + 9 /*TAB*/, true /*'Source'*/ ]
  • ...

Nastavení absolutní cesty pro obrázky – vhodné pro posílání formátovaných e-mailů (u formuláře na posílání e-mailů je nejlepší fckeditor nepoužívat (posílat pouze čistý text) tj. níže uvedené hodnoty nenastavujte:

  • U souboru sites/all/modules/fckeditor/fckeditor/editor/filemanager/ browser/default/connectors/php/basexml.php si povolte oprávnění pro zápis a upravte (změňte i adresu Vašeho webu):
    echo '<CurrentFolder path="'.
      ConvertToXmlAttribute($currentFolder) 
      .'" url="'.'http://www.adresa.webu'.
      ConvertToXmlAttribute(GetUrlFromPath($resourceType, 
      $currentFolder)) . '" />';
  • U souboru sites/all/modules/fckeditor/fckeditor/fckconfig.js si povolte oprávnění pro zápis a upravte:
    //absolutni cesta k webu
    FCKConfig.BaseHref = 'http://www.adresa.webu';
    //absolutni cesta pro smajliky
    FCKConfig.SmileyPath = FCKConfig.BaseHref + FCKConfig.BasePath +
      'images/smiley/msn/';