TinyMCE - Instalace a čeština



K dispozici je stránka o aplikaci TinyMCE, na které naleznete: popis aplikace, screenshoty stránek, návody pro aplikaci, demo stránky, diskuze k aplikaci. - Zobrazit stránku aplikace

Příprava na instalaci

Stažení aplikace

Nejprve si stáhněte aplikaci TinyMCE verzi "Main package". Na stránce http://www.tinymce.com/i18n/index.php?ctrl=lang&act=download&pr_id=1 vyhledejte český jazykový balíček, zaškrtněte ho a stisknutím "Download" stáhněte.

Rozbalení souborů

  1. Rozbalte (např. pomocí programu Total Commander) staženou aplikaci TinyMCE do nějakého adresáře ve vašem počítači (např. si vytvořte adresář tinymce). Je nutné zachovat strukturu adresářů - po rozbalení byste tedy měli najít adresář examples s ukázkovými soubory a jscripts, ve kterém je umístěno jádro aplikace.
  2. Do jiného adresáře (např. cestina) rozbalte stažený balík s českou lokalizací.
  3. Obsah složky tinymce_language_pack zkopírujte do adresáře tinymce/jscripts/tiny_mce.

Adresář cestina můžete smazat, již ho nebudete potřebovat.

Instalace

Editor TinyMCE se neinstaluje. Na server se nahraje jádro aplikace, a poté se do zdrojového kódu stránky, na které chcete aplikaci používat, vloží skript pro zobrazení editoru.

Kopírování souborů

Pomocí FTP klienta zkopírujte adresář tiny_mce do složky na server, na kterém budete aplikaci používat. Adresář tiny_mce naleznete ve složce tinymce/jscripts a obsahuje jádro celé aplikace. V našem ukázkovém případě adresář kopírujeme na web tinymce.demo2.cz do kořenového adresáře.

Tím je instalace hotová. Nyní přejdeme k implementaci do webové stránky.

Implementace editoru

Vytvoření webové stránky

Pokud zatím nemáte webovou stránku, na které chcete editor zobrazit, vytvořte ji.

Vložení a úprava skriptu

Do zdrojového kódu stránky někam mezi párové tagy <body> a </body> vložte skript pro zobrazení editoru. Ukázkové skripty pro různé varianty zobrazení editoru naleznete buď v rozbaleném adresáři s instalací tinymce/examples, nebo na oficiálních stránkách aplikace http://tinymce.moxiecode.com/examples/full.php. V našem ukázkovém případě použijeme a upravíme skript pro zobrazení všech součástí aplikace, který vypadá takto:

<script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript"> 
tinyMCE.init({ 
      // General options 
      mode : "textareas", 
      theme : "advanced", 
      plugins : "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager", 

      // Theme options 
      theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect", 
      theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor", 
      theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen", 
      theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage", 
      theme_advanced_toolbar_location : "top", 
      theme_advanced_toolbar_align : "left", 
      theme_advanced_statusbar_location : "bottom", 
      theme_advanced_resizing : true, 
 
      // Example content CSS (should be your site CSS) 
      content_css : "css/example.css", 
 
      // Drop lists for link/image/media/template dialogs 
      template_external_list_url : "js/template_list.js", 
      external_link_list_url : "js/link_list.js", 
      external_image_list_url : "js/image_list.js", 
      media_external_list_url : "js/media_list.js", 
 
      // Replace values for the template plugin 
      template_replace_values : { 
      username : "Some User", 
      staffid : "991234" 
      } 
}); 
</script> 
 
<form method="post" action="somepage">
      <textarea name="content" style="width:100%">
      </textarea>
</form>

Nyní je potřeba upravit pár částí skriptu. Postupujte následovně:

  1. Text "<your installation path>" nahraďte cestou k adresáři s jádrem aplikace umístěným na serveru. V našem ukázkovém případě se adresář nachází v kořenové složce webu, tudíž celá cesta bude vypadat takto "tiny_mce/tiny_mce.js".
  2. Do části "// General options" přidejte řádek language : "cs",. Tím se nastaví čeština.
  3. Pokud chcete v editoru používat stejné styly, jako má stánka, upravte cestu k souboru na řádce "content_css : "css/example.css", ".
  4. Vytvořený obsah z editoru se posílá pomocí formuláře. Vyhledejte řádek "<form method="post" action="somepage">" a místo textu "somepage" zadejte cestu ke skriptu, který bude formulář zpracovávat.

Upravený zdrojový kód bude vypadat například takto:

<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script> 
<script type="text/javascript"> 
tinyMCE.init({ 
      // General options 
      language : "cs",
      mode : "textareas", 
      theme : "advanced", 
      plugins : "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager", 

      // Theme options 
      theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect", 
      theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor", 
      theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen", 
      theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage", 
      theme_advanced_toolbar_location : "top", 
      theme_advanced_toolbar_align : "left", 
      theme_advanced_statusbar_location : "bottom", 
      theme_advanced_resizing : true, 
 
      // Example content CSS (should be your site CSS) 
      content_css : "css/styly.css", 
 
      // Drop lists for link/image/media/template dialogs 
      template_external_list_url : "js/template_list.js", 
      external_link_list_url : "js/link_list.js", 
      external_image_list_url : "js/image_list.js", 
      media_external_list_url : "js/media_list.js", 
 
      // Replace values for the template plugin 
      template_replace_values : { 
      username : "Some User", 
      staffid : "991234" 
      } 
}); 
</script> 
 
<form method="post" action="index.php"> 
      <textarea name="content" style="width:100%"> 
      </textarea> 
</form>

Webovou stránku uložte a nahrajte na server. Do internetového prohlížeče zadejte adresu webu a vytvořeného souboru. Pokud jste vše udělali správně zobrazí se vám na stránce TinyMCE editor.

Ukázka TinyMCE editoru
Větší obrázek
Ukázka TinyMCE editoru

Ukázka

Ukázku nainstalovaného editoru TinyMCE si můžete prohlédnout na http://tinymce.demo2.cz/.

Související odkazy

Aktualizace

Z bezpečnostních důvodů doporučujeme pravidelně provádět aktualizaci aplikace.

Diskuzní fórum pro aplikaci TinyMCE

Nové diskuzní téma můžete založit v sekci Tvorba web stránek.

Témata Reakce Poslední příspěvek
SQL příkaz INSERT přes CKeditor nebo TinyMCE 1 10.10.2012 16:44
Editor tinyMCE v JOOMLE se zahlcuje při vkládání obsahu 5 16.02.2011 15:07
Licence tinyMCE manager a CKFinder 3 15.09.2010 14:14
Joomla - problém s tinymce 1 10.02.2010 15:30
Oxid eshop CE + tinymce 3 16.10.2009 17:04

Změny a kontroly

K dispozici je kompletní přehled všech změn a kontrol v tomto návodu.


TinyMCE - Instalace a čeština
Aplikace: TinyMCE
Ověřeno pro: TinyMCE 3.5.8
Publikace: 25.8.2009
Kontrola: 24.2.2013
Přehled změn a kontrol
Diskuzní fórum
  • Webové aplikace
  • Tvorba web stránek
  • PHP, MySQL

forum.c4.cz

TinyMCE partneři

Seznam všech partnerů