Základy implementace

Načtení texyly

Cizí knihovny

Pro správnou funčnost je potřeba javascriptový framework jQuery a pro většinu pluginů je potřeba načíst i knihovnu jQuery UI. Texyla podporuje jQuery UI témata, proto načteme i CSS od jQuery UI.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" type="text/css">

Pro podporu obarvených HTML kódů v náhledu HTML výstupu volitelně připojíme obarvovač JUSH od Jakuba Vrány.

<script src="https://jush.svn.sourceforge.net/svnroot/jush/trunk/jush.js"></script>
<link rel="stylesheet" type="text/css" href="https://jush.svn.sourceforge.net/svnroot/jush/trunk/jush.css">

Vlastní kód Texyly

Načteme dva CSS soubory – základní CSS a “skin”.

<link rel="stylesheet" href="path/to/texyla/css/style.css" type="text/css">
<link rel="stylesheet" href="path/to/themes/default/theme.css" type="text/css">

Načteme jádro Texyly. Doporučuji neměnit pořadí souborů, některé kombinace nemusí fungovat.

<script src="path/to/texyla/js/texyla.js" type="text/javascript"></script>
<script src="path/to/texyla/js/selection.js" type="text/javascript"></script>
<script src="path/to/texyla/js/texy.js" type="text/javascript"></script>
<script src="path/to/texyla/js/buttons.js" type="text/javascript"></script>
<script src="path/to/texyla/js/dom.js" type="text/javascript"></script>
<script src="path/to/texyla/js/view.js" type="text/javascript"></script>
<script src="path/to/texyla/js/ajaxupload.js" type="text/javascript"></script>
<script src="path/to/texyla/js/window.js" type="text/javascript"></script>

Vybereme nějaký jazykový soubor.

<script src="path/to/texyla/languages/cs.js" type="text/javascript"></script>

Načteme volitelně některé pluginy.

<script src="path/to/texyla/plugins/keys/keys.js" type="text/javascript"></script>
<script src="path/to/texyla/plugins/resizableTextarea/resizableTextarea.js" type="text/javascript"></script>
<script src="path/to/texyla/plugins/img/img.js" type="text/javascript"></script>
<script src="path/to/texyla/plugins/table/table.js" type="text/javascript"></script>
<script src="path/to/texyla/plugins/link/link.js" type="text/javascript"></script>
<script src="path/to/texyla/plugins/emoticon/emoticon.js" type="text/javascript"></script>
<script src="path/to/texyla/plugins/symbol/symbol.js" type="text/javascript"></script>
<script src="path/to/texyla/plugins/files/files.js" type="text/javascript"></script>
<script src="path/to/texyla/plugins/color/color.js" type="text/javascript"></script>
<script src="path/to/texyla/plugins/textTransform/textTransform.js" type="text/javascript"></script>
<script src="path/to/texyla/plugins/youtube/youtube.js" type="text/javascript"></script>

Pokud používáte Nette Framework, od načítání takovéto hromady souborů vás může ochránit doplněk WebLoader (viz příklad v distribuci).

Rozběhnutí Texyly

Pro všechny textarey na stránce:

$(function () { // funkce se provede po načtení DOMu stránky
    $.texyla();
});

Pro textarey odpovídající danému selektoru.

$(function () {
    $("#main textarea.texyla").texyla();
});

Přidáme nastavení.

$(function () {
    $("texyla.textarea").texyla({
        width: 500
    });
});