TinyMCE - Instalace a čeština

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. - Zobrazit stránku aplikace

Příprava na instalaci

Stažení editorue

Nejprve si stáhněte editor TinyMCE ve verzi "Comunnity". A na stránce https://www.tiny.cloud/get-tiny/language-packages/ si stáhněte český (Czech) jazykový balíček.

Rozbalení souborů

Rozbalte (např. pomocí programu Total Commander) stažený balíček TinyMCE editoru. Je nutné zachovat strukturu adresářů, po rozbalení byste měli získat adresář tinymce s podadresářem js, ve kterém je umístěno jádro aplikace.
Dále si rozbalte balíček s překladem, měli byste získat adresář lang.
Nyní adresář lang zkopírujte do adresáře s jádrem editoru /tinymce/js/.

Instalace TinyMCE

Editor TinyMCE se neinstaluje. Stačí na server nahrát jádro editoru a do zdrojového kódu stránky, na které chcete editor používat, vložit skript pro jeho zobrazení.

Kopírování jádra editoru

Pomocí FTP klienta zkopírujte na váš web obsah adresáře tinymce, takže kompletní adresář js. 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 editoru hotová. Nyní přejdeme k implementaci do webové stránky.

Implementace TinyMCE 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 vložte někam mezi párové tagy <head> a </head> skript pro načtení editoru. Ukázkové skripty pro různé varianty zobrazení editoru naleznete v oficiální dokumentaci. V našem ukázkovém případě použijeme variantu pro základní zobrazení:

<script src="adresar-editoru/tinymce/tinymce.min.js"></script>
<script type="text/javascript"> 
  tinymce.init({
    selector: '#mojetextovepole',
  })
</script>

Nyní je potřeba upravit pár částí skriptu:

Text "adresar-editoru" nahraďte cestou k adresáři s jádrem aplikace. V našem ukázkovém případě se jedná o adresář js, který se nachází v kořenové složce webu, takže celá cesta bude mít tvar "js/tinymce/tinymce.min.js".
Text "#mojetextovepole" nahraďte id vašeho textového pole, u kterého chcete editor zobrazit. Pro výběr elementu lze případně použít všechny dostupné CSS selektory.
Pod řádek "selector: '#mojetextovepole',", přidejte nový řádek "language: 'cs',". Ten zajistí načtení češtiny do editoru.

Takže upravený kód bude mít tvar:

<script src="js/tinymce/tinymce.min.js"></script>
<script type="text/javascript"> 
  tinymce.init({
    selector: '#mojetextovepole',
    language: 'cs',
  })
</script>

A kompletní zdrojový kód jednoduché webové stránky bude vypadat např.:

<!DOCTYPE html>
<html lang="cs">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <script src="js/tinymce/tinymce.min.js"></script>

    <script>
      tinymce.init({
        selector: '#mojetextovepole',
        language: 'cs',
      })
    </script>
  
  </head>

  <body>
  <h1>TinyMCE na Webhostingu C4</h1>
    <form method="post">
      <textarea id="mojetextovepole">Ukázkový text</textarea>
    </form>
  </body>
</html>

Pokud jste vše udělali správně, tak by se vám měl na stránce zobrazit základní TinyMCE editor.

Větší obrázek

TinyMCE editor

Ukázka

Na ukázku rozšířené verze TinyMCE editoru se můžete podívat na http://tinymce.demo1.cz/.

Další varianta instalace

TinyMCE umožňuje i implementaci pomocí externího odkazu, při které není nutné nahrávat balíček editoru na vlastní web. Po registraci na stránce https://www.tiny.cloud/ získáte API klíč, který použijete v URL adrese pro načtení TinyMCE editoru:

<script src="https://cdn.tiny.cloud/1/api-klic/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

Související odkazy

https://www.tiny.cloud/ - oficiální stránky editoru TinyMCE (anglicky)
https://www.tiny.cloud/docs/ - dokumentace k editoru TinyMCE (anglicky)

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