WYSIWYG editor TinyMCE + TinyBroswer = solidní základ pro CMS
Včera jsem se na Twitteru rozplýval nad poslední verzi WYSIWYG editoru TinyMCE, který osobně používám již roky, ať už jako plugin do Textpatternu nebo jako hlavní editor do našeho vlastního CMS a e-commerce řešení. A ne že by poslední build TinyMCE byl něčím extra výjimečným, ale po delší době, kdy jsem opět vyzkoušel řadu nových i starých pluginů, jsem konečně našel jednoduché a plně funkční řešení pro správu a nahrávání souborů a obrázků. To vše navíc (od verze TinyMCE 3.2.5) plně inicializováno přes jQuery, což přináší řadu výhod i pro ovládání samotného editoru skrze jQuery (zapnutí/vypnutí editoru, extérní ovládání vybraného textu...). A k tomu navíc ještě naprosto jednoduše lze nastavit gzip kompresi.
jQuery jako již nepostradatelný pomocník při tvorbě webů
Bez javascriptového frameworku jQuery si tvorbu webů a web aplikací již ani nedokážu představit. Za poslední dva roky jsem neudělal jediný web, který by jej alespoň z části nepoužíval. Smysl je jasný - zjednodušení a zeefktivnění celé práce. I proto a díky obrovské rozšířenosti jQuery byl vytvořen plugin pro TinyMCE, kterým se editor inicializuje, což je v konečném důsledku rychlejší než originál (měl by být) a nenačítá se zbytečně dvakrát např. Sizzle CSS selector engine.
TinyBrowser - TinyMCE plugin pro správu a nahrávání souborů a obrázků
Ne, že by TinyBrowser byl nějaký nový plugin, spíše naopak, ale stejně jako mnohé jiné - např. iBrowser nebo Ajax File/Image Manager, tak i starší verze TinyBrowseru mi nikdy neběhaly podle mých představ a zároveň také nevypadaly zrovna "lama friendly". A když fungovaly, tak se staršími verzemi TinyMCE, což je zase zbytečně zpátečnické. Dokonce jsme jednu dobu používali plně komerční řešení SMImage + SMExplorer + SMMultiUpload, kdy i na základě našich podnětů byly dopracovány určité nastavení... a přesto mě to nutilo hledat jiné, lepší řešení a tím je právě TinyBrowser 1.41, jež je licencována pod GNU GPL. Jednoduché, rychlé nastavení, které bez problémů funguje i na PHP 5.3, kde i komerční řešení už pokulhávalo.
Jinými slovy - během 5 minut jsem měl staženou a nastavenou poslední verzi TinyMCE 3.2.7 + pluginu TinyBrowser 1.41 (plus další fajn pluginy - o tom snad příště) a vše fungovalo napoprvé, žádné pátrání, kde se co zaseklo, žádná nutnost úpravy zdrojáku, aby to fungovalo na PHP 5.3. Třešničkou je pak i přítomnost českého překladu v zipu TinyBrowser, byť web tvůrců o ní mlčí. Prostě nádhera - rozhodně v porovnání s výše uvedenými pluginy, se kterými jsem se mnohdy natrápil dlouhé hodiny. K tomu jako bonus možnost ovládat editor externě (nejen) přes jQuery - viz příklad č. 23 na webu TinyMCE.
Tím vše zdaleka nekončí. Kdo si již hrál s podobnými pluginy pro TinyMCE ví, že je zde velmi užitečná funkce file_browser_callback, jež stačí v initu nastavit na TinyBrowser (viz kompletní zdroják v příkladu - odkaz na konci článku) a při vkládání odkazu (přes Vložit odkaz) máte možnost tímto zavolat editor a vložit odkaz na interní soubor v rámci serveru. Jen upozorním, že v defaultním nastavení jsou složky pro obrázky / soubory / média (flash apod.) odděleny. Tzn. že když nahrajete obrázek v obrázcích, nemůžete na něj vložit i link pohodlně přes TinyBrowser, ale pouze ruční úpravou URL - ale tohle si každý může nastavit dle libosti v config_tinybrowser.php. V závěru této spanilé jízdy je třeba dále podotknout, že TinyBrowser je také plně funkční pro FCKeditor (který mě však nikdy neoslovil), jež se však od letošního roku přejmenoval na CKEditor a líbí se mi ještě míň, než kdysi.
Kompletní náhledy TinyBrowseru
 |
 |
| Přehled obrázků |
Upload obrázků |
 |
 |
| Editace obrázků |
Editace adresářů |
Jak nastavit TinyMCE a TinyBrowser
Nebudu konkrétně popisovat, co jaké nastavení dělá a proč jej tam mám, to ani není smyslem článku. Můj init soubor pro TinyMCE je poněkud ořezaný oproti tomu, co vše TinyMCE umí - ale to vše má svůj důvod - čím větší volnost dáte člověku při práci s editorem, tím více a rychleji celý web pomrví.
Init pro TinyMCE
V nastavení TinyMCE pro zprovoznění TinyBrowseru je nutná jediná věc - přidat tento řádek: file_browser_callback : "tinyBrowser". Spíše pro okrajovou informaci však uvádím celý můj init TinyMCE z live příkladu:
tinyMCE.init({
language : "cs",
entity_encoding : "raw",
entities : "60,lt,62,gt,160,nbsp,38,amp",
mode : "exact",
elements : "editor",
theme : "advanced",
convert_fonts_to_spans : "true",
remove_script_host : "false",
plugins : "safari,table,advlink,advimage,searchreplace,contextmenu,paste,fullscreen,visualchars,nonbreaking,media,xhtmlxtras,paste,iespell,preview,fullscreen,inlinepopups,smsymbol,smeditimage,smlinebreak",
content_css : "../css/editor.css",
paste_create_paragraphs : true,
paste_create_linebreaks : false,
paste_convert_middot_lists : true,
paste_use_dialog : false,
paste_auto_cleanup_on_paste : true,
paste_convert_headers_to_strong : false,
paste_strip_class_attributes : "all",
paste_remove_spans : true,
paste_remove_styles : true,
cleanup : true,
verify_html : true,
relative_urls : false,
document_base_url : "",
theme_advanced_blockformats : "p,h2,h3,h4,div",
custom_undo_redo : false,
width: 700,
height: 450,
theme_advanced_disable : "",
theme_advanced_buttons1 : "bold,italic,strikethrough,|,bullist,numlist,indent,outdent,|,styleselect,formatselect,|,cleanup,code,fullscreen",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,undo,redo,|,link,unlink,|,anchor,image",
theme_advanced_buttons3 : "tablecontrols,|,sub,sup,|,nonbreaking,visualchars,charmap,|,smsymbol,smeditimage,smlinebreak",
tab_focus : ':prev,:next',
plugin_insertdate_dateFormat : "%Y-%m-%d",
plugin_insertdate_timeFormat : "%H:%M:%S",
theme_advanced_resize_horizontal : false,
theme_advanced_resizing : true,
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_path_location : "bottom",
theme_advanced_path : true,
nonbreaking_force_tab : true,
apply_source_formatting : true,
fix_table_elements : true,
fix_list_elements : true,
file_browser_callback : "tinyBrowser"
});
Config pro TinyBrowser
Co se týká nastavení TinyBrowseru, tak zde je nutné nastavit 3, maximálně 4 proměnné:
- relativní cestu k adresáři s obrázky - $tinybrowser['path']['image']
- k adresáři se soubory - $tinybrowser['path']['file']
- k adresáři s médii (avi, flv, wmv atd.) - $tinybrowser['path']['media']
- a v případě, že nemůžete použít výchozí $_SERVER['DOCUMENT_ROOT'], nastavíte si ručně relativní cestu od rootu serveru k rootu vašeho webu webu pomocí $tinybrowser['docroot']
// Default is rtrim($_SERVER['DOCUMENT_ROOT'],'/') (suitable when using absolute paths, but can be set to '' if using relative paths) $tinybrowser['docroot'] = rtrim($_SERVER['DOCUMENT_ROOT'],'/'); //$tinybrowser['docroot'] = '/data/www/domeny/domain.ltd/www'; // File upload paths (set to absolute by default) $tinybrowser['path']['image'] = '/labs/docs/obrazky/'; // Image files location - also creates a '_thumbs' subdirectory within this path to hold the image thumbnails $tinybrowser['path']['media'] = '/labs/docs/media/'; // Media files location $tinybrowser['path']['file'] = '/labs/docs/soubory/'; // Other files location
O TinyMCE by se toho dalo napsat spoustu, ale věřím, že tento článek bude k užitku těm, kteří tento editor používají a hledali funkční, free a user-friendly řešení pro správu a upload souborů a obrázků. Nastavení je krajně triviální, plugin stačí jen stáhnout, nahrát do složky plugins, nastavit config, přidat jeden řádek v tiny_mce_init.js a vše okamžitě funguje.
Živá ukázka:
Jak funguje TinyMCE 3.2.7 a TinyBrowser 1.41 se můžete nyní sami podívat.
Pokud se vám líbil tento článek můžete Profi magazín odebírat pomocí RSS.
Možné související články:
Komentáře
Jan Rozehnal
25. září 2009, 21:54
No tohle je prostě paráda, začínám o něm uvažovat. TinyMCE mám rád jako wysiwyg, používám jej v Textpatternu a tohle je dokonalý.
Jiří Melčák
25. září 2009, 22:13
@Jan Rozehnal: Jako opravdu je, ale co se týká Textpatternu – tak nasadit se to samozřejmě dá, ale u TXP se mi líbil (teda líbil – trochu hardcodingu a pak se mi líbil) plugin do TinyMCE – txpimage, byť je pravda, že nebyla možnost vložit přímý odkaz na soubor, ale pouze na obrázek.
Na druhou stranu máš asi kus velké pravdy, takhle provážeš i “files” adresář. Jedinou nevýhodou (možná i výhodou) je zrušit v TXP záložku “obrázky”, protože pak ti jsou k víceméně ničemu obrázky nahrané přes tuto záložku, neboť si je přes TinyBrowser můžeš lehce smazat. Přemýšlím… tak možná spíš nevýhoda – už se ti nebudou automaticky generovat náhledy, což není (z mé zkušenosti) pro klienty vůbec user-friendly. Ale cesta se najde.
Jiří Melčák
14. říjen 2009, 14:09
@Energys: Chce to zapnout ve Firefoxu Firebug a třeba se tam objeví nějaká chyba v javascriptu. Často bývá zásadní chyba v relativních/absolutních cestách. Případně se JS skript hadá s jiným JS frameworkem. Pokud tam nějaký máte, zkuste přehodit pořadí načítání JS skriptů v HEAD, aby první byl framework a až poté JS skripty pro TinyMCE (takový problém jsem měl když jsem kdysi používal framework Prototype).
Guest97531
20. říjen 2009, 19:48
to energys: mel jsem stejny problem hlupak jsem neuploadnul browser by:
<script type=“text/javascript” src=“tiny/plugins/tinybrowser/tb_tinymce.js.php”></script>
no nic. Mam ale takovy problem ze mi pri uploadu obrazku neuklada thumbnail nevi nekdo proc? :(
Jiří Melčák
20. říjen 2009, 20:30
Někdy bývá problém s právy, že skript nemůže vytvořit složku _thumbs a nastavit ji správný CHMOD. Často pomůže výchozí složce do níž celý skript přistupuje dát chmod 777.
Rovnako mam problem s thumbs, rucne som vytvoril _thumbs + chmod 777. No nevytvori nahlad, aj ked napise, ze “1 nové náhľady obrázkov boli generované.”.Mam nastavene:
$tinybrowser[‘docroot’]=rtrim($_SERVER[‘DOCUMENT_ROOT’],’/www/’);
$tinybrowser[‘path’][‘image’] = ‘/www/useruploads/’;
a pokial som nenastavil:
$tinybrowser[‘link’][‘image’] = ‘/useruploads/’;
nechcelo zobrazit spravnu url obrazka.
Ktoru cestu este kde nastavit?
Jiří Melčák
23. říjen 2009, 09:05
@tsg: Než se trápit z testováním cest je lépe ji nastavit natvrdo od kořene rootu serveru, tzn. např.:
$tinybrowser[‘docroot’] = ‘/data/www/domeny/domain.tld/www’;
Patrik
25. říjen 2009, 23:22
Ahoj, chci se zeptat, dá se TinyBrowser připojit jen k input poli? Myslím tím pro nahrávání obrázku mimo TinyMCE.
Nebo případně jiný plugin který to umí?
Díky moc za každou radu:-)
Patrik
Díky za dobrý tip!
Hned jsem to zkoušel implementovat do svého webu ale nezobrazují se mi náhledy. Při nahrání se fotka uloží, vygeneruje se náhled, ale v TinyBrowseru se mi nezobrazí náhled – jako by náhled neexistoval.
Nevíte čím by to mohlo být?
Struktura souborů je takováto:
www.domena.cz/moduly/tinymce/ – skripty pro tinymce
www.domena.cz/moduly/tinymce/plugins/tinybrowser/ – skripty pro tiny browser
www.domena.cz/fotky/ – zde jsou fyzicky umístěné JPG soubory
www.domena.cz/administrace/ – zde je admin na nahrávání fotek
díky za jakoukoli radu.
Zkoušel jsem všelijaké kombinace nastavení, ale nic nezabralo.
Nastavoval jsem $tinybrowser[‘docroot’] = ‘’;
$tinybrowser[‘path’][‘image’] i document_base_url, ale nic.
Ahoj, chtěl bych vás poprosit o radu. Mám redakční systém na správu obsahu více domén. Systém je na jednom serveru a je pro všechny domény společný. Každý uživatel, který spravuje obsah svých stránek by měl mít k dispozici Tiny MCE + Tiny Browser. A zde je problém. Potřeboval bych pro každého uživatele určit složku, do které se budou ukládat fotky, videa atd. Každý uživatel bude mít jinou složku. Existuje nějaká možnost nastavit v config_tinybrowser.php dynamicky cestu ke složce pro právě přihlášeného uživatele? Nejak se mi nepodařilo hodit do config_tinybrowser.php svoji SESSION s názvem složky. Nevíte někdo jak na tento problém?
Patrik
28. listopad 2009, 18:00
Ahoj,
taky jsem válčil s náhledy, soubory to nahrálo, ale náhled nikoliv.
Pomohla uprava konfiguráku:
// Default is rtrim($_SERVER[‘DOCUMENT_ROOT’],’/’) (suitable when using absolute paths, but can be set to ‘’ if using relative paths)
//$tinybrowser[‘docroot’] = rtrim($_SERVER[‘DOCUMENT_ROOT’],’/’) . ‘/tiny’;
$tinybrowser[‘docroot’] = ‘e:/xampplite/htdocs’;
// Folder permissions for Unix servers only
$tinybrowser[‘unixpermissions’] = 0777;
// File upload paths (set to absolute by default)
$tinybrowser[‘path’][‘image’] = ‘/tiny/useruploads/images/’; // Image files location – also creates a ‘_thumbs’ subdirectory within this path to hold the image thumbnails
$tinybrowser[‘path’][‘media’] = ‘/tiny/useruploads/media/’; // Media files location
$tinybrowser[‘path’][‘file’] = ‘/tiny/useruploads/files/’; // Other files location
// File link paths – these are the paths that get passed back to TinyMCE or your application (set to equal the upload path by default)
$tinybrowser[‘link’][‘image’] = ‘http://localhost/tiny/useruploads/images/’; // Image links /x/
$tinybrowser[‘link’][‘media’] = ‘http://localhost/tiny/useruploads/media/’; // Media links
$tinybrowser[‘link’][‘file’] = ‘http://localhost/tiny/useruploads/files/’; // Other file links
Pak to začalo fungovat jak mělo.-)
BTW: snad je vidět co jsem změnil.-)
archie
7. prosinec 2009, 17:11
tak jsem tez zkousel zprovoznit tiny mce s tiny browserem. Vsechno funguje az ne upload obrazku..vidim jen prazdnej ramecek bez jaky koli moznosti nejaky obrazek vybrat..netusi nekdo?
Petr
5. leden 2010, 23:02
to Archie: nepoužíváš náhodou SeaMonkey? Měl jsem ten samý problém, hledal jsem kde může být chyba v konfiguraci a nakonec mě napadlo zkusit jiný prohlížeč. A najednou mi to funguje.
ata
8. únor 2010, 23:25
Dobrý den!
…jako redakcni system pouzivam mnews, kde je zaimplementovan tinybrowser i tinymce, ale rad bych , a to neumim, sem vsadil novou verzi, tak jako na: http://www.profimagazin.cz/labs/tinymce-tinybrowser-example-1.html . Vse zde funguje bezva, akorat bych rad u vkladani obrazku, chtel zadavat class a rel…. :) Nevim , zda se vyjadruji srozumitelne…:) Dekuji za radu!
Jiří Melčák
9. únor 2010, 07:36
ata: Rozumím. Ale v podstatě není co řešit, neboť to tam již je. TinyBrowser je o vkládání obrázků, ale odkaz a href vkládáš přes “Vložit odkaz”, kde máš jak select pro class, tak v poslední záložce rel atribut – případně hardcodovat index.htm v tomto pluginu a dopsat si vlastní rel.
Marek
27. květen 2010, 18:48
Dobry den … prosim poradte mi … chci vyuzivat tinybrowseru na svem webu ale nedari se mi ho spustit. v tinymce se objevi ikona ale po klinuti se nic nedeje. zkousel sem ruzne predelavat linky a tak a nefunguje. Taky nevim co mam napsat do configu $tinybrowser[‘docroot’] , mam tam slozku kde je ulozeny tinybrowser ale nevim jestli to je spravne … nemate nekdo nejake tipy co bych mohl mit blbe?
Dobrý den, postrádám v TinyMCE editoru vytvořit v jednom kroku náhled obrázku s odkazem na velký obrázek. Alespoň v FCKeditoru to tak fungovalo – v jedné záložce jsem nastavil náhledový obrázek a v druhé plný obrázek. Můžete sem prosím napsat, zda existuje nějaké řešení? Děkuji
Jiří Melčák
7. červen 2010, 10:12
Bohužel o ničem takovém nevím. Před 3 roky jsem si hardcodoval jeden plugin, který byl určen to TinyMCE ovšem pouze ve spolupráci s CMS Textpattern, který mi pak dělal přesně to, co chcete. Bylo to přímo navázáno na DB, kde se počítalo, že obrázek má jak originální rozměry, tak vygenerovaný náhled. Mohu tedy maximálně dát odkaz na plugin do Textpatternu, který toto dělá a bude nutné to nastudovat: hak_tinymce
Plugin však umožňoval pouze vložení buď náhledu nebo originálního obrázku – ovšem přidat třetí možnost pro vložení náhledu s odkazem na originální obrázek už byla víceméně prkotina. Vypreparovat to samostatně ale bude asi nemalý problém.
raddimm
11. červen 2010, 10:44
dobry den – nevite jestli se neco zmenilo v ramci podminek ci zpoplatneni tinybrowser? najednou mi na zadnem z webu kde fungoval nejde zalozka upload (objevi se cista, prazdna)
Jiří Melčák
11. červen 2010, 11:25
Je to “bohužel” tak. Nová verze TinyBrowser 1.42 je již zpoplatněna – dodejme však, že směšnou částkou. Pokud budou autoři nadále vyvíjet plugin, tak je to cena více než přátelská, byť tam osobně postrádám nemálo funkcí a zřejmě nás to donutí vyvinout vlastní plugin.
Více informací o cenách: TinyBrowser 1.42
