Kategória: Rozšírenia

Zmenené: 29. január 2011

Artof Editor

Taký WYSIWYG editor je dôležitý. Nie je síce nevyhnutný, ale dokáže písanie článkov výrazne zjednodušiť. Na tomto sa iste zhodneme mnohí. Na čom sa asi nezhodneme, je ktorý editor použiť. Nedávno som objavil Artof Editor a páči sa mi.

Čo je k dispozícii

Po nainštalovaní Joomly toho na výber veľa nie je. Vlastne si môžete vybrať len medzi TinyMCE a prostým textovým poľom, takže je dosť pravdepodobné, že sa začnete obzerať po niečom pokročilejšom. So mnou to nebolo inak a ako prvé riešenie sa mi ponúkol editor JCE. Tento editor som používal ešte v Joomla! 1.0 a vtedy som bol veľmi spokojný a jeho vlastnosti si chvália mnohí. Keď som aktualizoval Joomlu na verziu 1.5 bol s JCE nejaký problém (už si presne nepamätám aký) a tak som hľadal niečo iné.

Našiel som JoomlaFCK editor, bol som s ním dlho spokojný až bol jedného dňa nahradený novou verziou JoomlaCK editor. Nová verzia JoomlaCK sa mi oproti staršej zdá rýchlejšia, ale má oveľa menej možností konfigurácie a proste sa mi akosi nezdala. Celkovo som si na ňu nedokázal zvyknúť, ale najviac mi vadili chybové hlásenia, ktoré produkuje (áno mám zapnuté chybové hlásenia, ale nie na tomto serveri), tak som pátral ďalej.

Znova som skúsil JCE, ale akosi mu nechutila moja Opera, a to až tak, že Opera padala, až som celkom náhodou narazil na Artof editor.

Art of…

Tento editor som nenašiel cez stránku rozšírení Joomla, ale priamo na stránke autora, keď som hľadal nejaký návod k použitiu zaznamenávania v Joomle a na tejto stránke nájdete ešte niekoľko zaujímavých vecí. Ale vráťme sa späť k editoru…

Artof Editor je založený na editora CKEditor a hoci to som sa o tom nikde nedočítal, mám pocit, že CKEditor a JoomlaCK majú k sebe veľmi blízko. Avšak, na rozdiel od JoomlaCK, Artof Editor neprodukuje žiadne chybové správy a má minimum konfiguračných volieb, ale o tých neskôr a jeho ovládanie sa mi páči, ale hlavne bez problémov funguje.

A čo editor poskytuje? Asi najlepší prehľad si urobíte z obrázka ovládacieho panela, môj zjednodušený vyzerá takto:

artof_01.png

Takže čo vidno? V skratke:

  • prepínanie zobrazenie WYSIWYG/Zdrojový kód;
  • nejaké tie kopírovacie funkcie;
  • nástroje na hľadanie;
  • manipulácia s obrázkami, flashom, smajlíkmi, či špeciálnymi znakmi;
  • základné formátovacie funkcie;
  • práca s odkazmi a kopa ďalších…

Chýba niečo? Vlastne áno, chýba podpora nahrávania súborov priamo na server. Ak je to pre vás problém, hľadajte iný editor alebo študujte ako ju zabudovať (CKEditor má pre to predpripravené API).

Konfigurácia

Ako som už spomenul Artof editor neposkytuje veľa možností konfigurácie cez prostredie Joomla. Z toho mála, čo poskytuje, si môžete nastaviť jazyk, skin a použité panely nástrojov pre stránku i pre administráciu. Práve pri nich sa zastavím. Na výber sú dva prednastavené a dva vlastné. Keď som sa pokúšal nastaviť si vlastné panely, nebol som veľmi úspešný, ale potom som našiel na stránke autora príklady, ktoré si upraviť nie je žiadny problém. Pre porovnanie tu sú moje, upravené, panely:

Custom 1

['Source','-','Cut','Copy','Paste','PasteText','PasteFromWord','-'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize','ShowBlocks','-','About']

Custom 2

['Source','-','Cut','Copy','PasteText','PasteFromWord'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['Link','Unlink','Anchor'],
['Image','Table','SpecialChar','PageBreak'], ['Format']

To, že editor nemá k dispozícii viac možností konfigurácie je možno pre niekoho zlé. Mňa to však prinútilo pátrať ďalej, a tak som objavil konfiguračné možnosti o akých sa mi ani nesnívalo…

Ďalšie nastavenia

Pre možnosť dostať z editora všetko čo dokáže, je potrebné upraviť konfiguračné nastavenia priamo v súboroch editora. Nebudem sa tu pokúšať o kompletný popis (ten je v dokumentácii), ale len niekoľko ukážok, ako inšpiráciu…

Konfiguračný súbor sa volá config.js a nájdete ho v adresári zásuvného modulu (plugins/editors/aertofeditor). Vo východzom stave neobsahuje skoro nič, len pripravený príklad:

CKEDITOR.editorConfig = function( config )
{
  // Define changes to default configuration here. For example:
  // config.language = 'fr';
  // config.uiColor = '#AADC6E';
};

Väčšina nasledujúcich konfiguračných volieb patrí práve do tejto funkcie, ak nie, spomeniem to.

Kontrola preklepov

Po aktualizácii Opery na verziu 11 mi zrazu prestalo podčiarkovať preklepy, po chvíľke pátrania som našiel voľbu, ktorá vypína zabudovanú kontrolu preklepov prehliadača a hoci je v dokumentácii napísané, že funguje len s FireFoxom, zjavne funguje už aj v Opere:

config.disableNativeSpellChecker = false;

Entity latinky

Východzie nastavenie prepisuje naše národné znaky do HTML entít. Toto je síce bezpečné (vzhľadom k zobrazeniu) nastavenie, ale podľa mňa nepraktické, napríklad pri vyhľadávaní v databáze… Aj z tohoto dôvodu som toto prepisovanie vypol:

config.entities_latin = false;

Ak máte záujem, sú k dispozícii aj voľby, napr. entities_greek, entities_processNumerical, či htmlEncodeOutput. Posledný slúži na vypnutie renderovania HTML výstupu, ak ho nastavíte na true, tak dostanete stránku s plným obsahom HTML kódu…

Režim P a BR

Tieto voľby riadia správanie editora pri stlačení klávesy Enter a kombinácie Shift + Enter. Môžete si nastaviť, ktorú HTML značku príslušné stlačenie vloží. K dispozícii sú:

  • CKEDITOR.ENTER_P vytvorí nový odsek;
  • CKEDITOR.ENTER_BR vloží zalomenie riadku;
  • CKEDITOR.ENTER_DIV vytvorí nový prvok DIV.

Východzie nastavenie je odsek po Enter a zlom riadku pri Shift + Enter, ak to máte radi naopak, môžete použiť:

config.shiftEnterMode = CKEDITOR.ENTER_P;
config.enterMode = CKEDITOR.ENTER_BR;

S týmito voľbami súvisí aj nastavenie forceEnterMode.

Nastavenie pri štarte

Niekedy je dobré, aby editor pri spustení získal zameranie (focus) a tiež mám rád, aby mi zobrazoval hranice blokov (aspoň sa v tom lepšie vyznám):

config.startupFocus = true;
config.startupOutlineBlocks = true;

Dosť zaujímavá môže byť i voľba startupMode.

Nastavenie veľkosti

Dôležitá vlastnosť je nastavenie veľkosti okna editora. Ak ho nastavíte veľký, tak sa v lepšom prípade nezmestí do okna a v horšom prekryje iný obsah, či je prekrytý iným obsahom. Toto rieši editor sám a svoju veľkosť nastavuje automaticky, dá sa mu s tým ale trochu pomôcť.

Varovanie

Nepodporuje percentuálne rozmery!!!

Do nastavenia šírky by som nezasahoval, ale iste si nastavím výšku, pretože východzia je malá. Rovnako nechám zapnutú možnosť zmeny veľkosti, ale povolím len zmenu šírky. A aby sa mi nestalo, že sa mi šmykne myška a editor mám na tri výšky monitora, nastavím aj minimálnu a maximálnu výšku pri zmene veľkosti okna editora:

config.resize_dir = 'vertical';
config.height = 450;
config.resize_minHeight = 300;
config.resize_maxHeight = 900;

Zoznam štýlov

Chvíľu mi trvalo, kým som prišiel na to, ako naplniť rozbaľovací zoznam so štýlmi, našťastie naozaj len chvíľu. Musím však konštatovať, že toto nemá editor veľmi dobre vyriešené, pretože štýly treba udržiavať na dvoch miestach, ale čo už nič nie je dokonalé.

Najprv je treba nastaviť použitie vlastnej množiny štýlov, povedzme my_styles:

config.stylesCombo_stylesSet = 'my_styles';

a potom samotnú množinu štýlov. Toto nastavenie už nepatrí do funkcie, kam išli všetky nastavenia, ale mimo túto funkciu:

CKEDITOR.addStylesSet( 'my_styles',
[
  // Block Styles
  { name:'typoAler', element:'p', attributes:{ 'class':'typoAler'} },
  { name:'typoInfo', element:'p', attributes:{ 'class':'typoInfo'} },
  { name:'typoWarn', element:'p', attributes:{ 'class':'typoWarn'} },
  { name:'typoStic', element:'p', attributes:{ 'class':'typoStic'} },
  { name:'typoFeed', element:'p', attributes:{ 'class':'typoFeed'} },
  { name:'typoDown', element:'p', attributes:{ 'class':'typoDown'} },
  // Inline Styles
  { name : 'Kód', element : 'code'},
]);

A aby sa tieto štýly zobrazovali v editore tak, ako sú nadefinované, je potrebné ich definovať ich nadefinovať aj v súbore content.css, ktorý je v rovnakom adresári ako config.js.

Trvalé nastavenie

Ak sa pustíte do hrania sa s týmto editorom, ľahko zistíte, že robiť nastavenie spôsobom, ktorý som popísal vyššie, teda v súboroch config.js a contents.css, môže viesť k strate krvopotne urobených zmien nastavenia pri aktualizácii/reinštalácii editora. Aby ste tomu predišli, stačí svoje nastavenia urobiť do samostatných súborov, niekde mimo adresára artofeditor a do súboru confg.js pridať iba odkazy na tieto súbory, napríklad:

CKEDITOR.editorConfig = function( config )
{
  config.customConfig = '../artof-config.js';
  config.contentsCss = '/plugins/editors/artof-style.css';
}

Ako vidno z príkladu, svoje nastavenia a štýly som si uložil do adresára o úroveň vyššie, teda do /plugins/editors/ .

Nezabudnite na to, že nastavenia sú v súbore JS a aby sa zmeny prejavili, je potrebné vymazať vyrovnávaciu pamäť prehliadača.config.