TinyMCE - Instalace

Návody pro C4

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

Příprava na instalaci

Stažení aplikace

Nejprve si stáhněte aplikaci TinyMCE verzi "Main package". Na stránce http://tinymce.moxiecode.com/download_i18n.php vyhledejte český jazykový balíček, zaškrtněte ho a stisknutím "Download" stáhněte.

Rozbalení souborů

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.
Do jiného adresáře (např. cestina) rozbalte stažený balík s českou lokalizací.
Zkopírujte celý obsah složky cestina 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 do kořenového adresáře webu tinymce.demo1.cz.

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 mezi párový tag <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ě:

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".
Do části "// General options" přidejte řádek language : "cs",. Tím se nastaví čeština.
Pokud chcete v editoru používat stejné styly, jako má stánka, upravte cestu k souboru na řádce "content_css : "css/example.css", ".
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.