Pohodlný editor Texy!

Texyla 0.4.3.4 | Stáhnout

Implementace

Stáhněte si Texylu 0.4 a rozbalte do příslušného adresáře. Do hlavičky (<head>) dejte kód podobný následujícímu. Umístění Texyly může být libovolné.

<script type="text/javascript" src="texyla/texyla.js"></script>

Ztexylovatění textarey

Ztexylovatění textarey provedete zavedením nové instance objektu Texyla, parametrem předáte nastavení (o tom kousek níže).

new Texyla(options);

Toto můžete provést, kdykoliv je již načtena textarea. Např.:

<form>
<div>
<textarea name="txt" rows="20" cols="120" id="txt"></textarea>
</div>
<script type="text/javascript">
new Texyla(Texyla.configurator.admin('txt'));
</script>
</form>

Důležité: Aby správně Texyla fungovala, MUSÍ MÍT KAŽDÁ TEXTAREA, U KTERÉ CHCETE POUŽÍT TEXYLU NASTAVENO ID

id="jedinecny_nazev"

Nastavení

Existují přednastavené konfigurátory (admin, forum) – liší se v liště, konfiguraci Texy a povolení náhledu HTML kódu. Parametrem předáváte buď objekt textarey nebo string s id textarey.

var options = Texyla.configurator.admin('txt');

nebo

var options = Texyla.configurator.forum('txt');

Dále můžete upravovat vlastnosti objektu s nastavením.

Lišta

Můžete si vybrat přednastavených lišt:

admin (výchozí pro konfiguraci admin)
forum (výchozí pro konfiguraci forum)
full (plná verze se všemi funkcemi)
webmaster (forum + tlačítka pro kód)

Např.:

options.toolbar = 'forum';

Nebo lištu definujete jako pole. Používáte stringy pro předdefinovaná tlačítka, hodnotu null pro oddělovač, další pole pro vytvoření menu. Např.:

options.toolbar = ['bold', 'italic', null, ['link', 'ul']];

Předdefinovaná tlačítka

string	význam
h1	Největší nadpis
h2	Velký nadpis
h3	Střední nadpis
h4	Nejmenší nadpis
bold	Tučně
italic	Kurzíva
del	Přeškrtnuto
center	Zarovnání na střed
left	Zarovnání vlevo
right	Zarovnání vpravo
justify	Zarovnání do bloku
ul	Seznam
ol	Číslovaný seznam
blockquote	Bloková citace
sub	Dolní index
sup	Horní index
link	Odkaz
img	Obrázek
table	Tabulka
acronym	Vysvětlení zkratky
hr	Čára
code	Kód
code_html, code_css, code_js, code_php, code_sql	varianty code pro jednotlivé jazyky
inlineCode	Inline kód
html	Vypnutí texy
text	Vypnutí texy, zpracovat jako text
div	Element <div>
comment	Texy komentář
notexy	Vypnutí texy (inline text)
emoticon	Smajlík
symbol	Tabulka zvláštních znaků
web	Odkaz na web editoru Texyla

Nastavení tlačítka kurzívy

V texy je možné kurzívu zapsat *dvěma* //způsoby//. Který si vyberete, je na vás.

options.emSyntax = '*'; // výchozí
// nebo
options.emSyntax = '//';

Tlačítka v dolní liště

Povolení náhledu HTML kódu

options.allowHtmlPreview = true;

nebo false, když jej chcete zakázat. Pro konfiguraci admin je výchozí true, pro forum false.

Odesílací tlačítko

options.submitButton = true;

nebo false, když jej chcete zakázat. Hodnota 'preview' tlačítko zobrazí jen při náhledu (v editaci ne). Ve výchozím nastavení není povolené.

Tlačítko nápovědy k syntaxi

options.syntaxButton = true;

nebo false, když jej chcete zakázat. Výchozí je true.

Vzhled

Téma ikonek

Vzhled ikonek, k dispozici jsou silk (výchozí) a old (verze old ale není od Texyly 0.4.3 udržována, takže některá tlačítka mohou chybět). Např.:

options.iconType = 'old';

Formát ikonek

Pokud nastavujete vzhled ikonek, musíte také nastavit odpovídající formát – obvykle png (výchozí) nebo gif. Např.:

options.iconFormat = 'gif';

Téma vzhledu

K dispozici default (výchozí) nebo win_xp. Např.:

options.theme = 'win_xp';

„Hezká“ tlačítka

true – vzhled tlačítek definuje téma vzhledu (výchozí)
false – klasická systémová tlačítka

options.coolButtons = false;

Šířka editoru

'auto' (string) – zachová se původní šířka (výchozí)
číslo – šířka editoru v pixelech

options.editorWidth = 450;

Odsazení textarey

Odsazení textarey od okrajů editoru, horní a dolní lišty. Číslo (počet pixelů). Např.:

options.textareaMargin = 6;

Výchozí pohled

Je možné zvolit výchozí pohled (Editace – 'edit', Náhled – 'preview', i HTML náhled – 'html')

options.defaultView = 'preview';

Schování elementů po načtení Texyly

Může se stát, že budete potřebovat schovat některé elementy na stránce, které jsou potřeba například při přístupu bez Javascriptu. Příkladem může být tlačítko submit nebo krátká nápověda k syntaxi Texy.

options.hideElements = [
        document.getElementById('napoveda'),
        document.getElementById('submit').parentNode
];

Hodnoto může být:

element
pole elementů
false – nic se neschovává

Smajlíky

Vybírat můžete z předdefinovaných texy (výchozí) nebo silk:

options.emoticons = 'silk';

nebo nastavíte smajlíky jako asociativní pole například tohoto tvaru:

options.emoticons = {
        folder: 'silk/',
        format: 'png',
        width: 16,
        height: 16,
        icons: {
                ':-)': 'smile',
                ':-(': 'unhappy',
                ';-)': 'wink',
                ':-D': 'grin',
                ':-O': 'surprised',
                ':-P': 'tongue'
        }
}

Pokud máte smajlíky různých velikostí, nezadávejte width a height.

Smajlíky pak ještě musíte nastavit v php.

Tabulka zvláštních znaků

Pole znaků. Pokud chcete vkládat něco jiného než jak znak vypadá (např.: < → <), tak je položkou další pole. Na první pozici je znak, na druhé to, co chcete vložit. Např.:

options.symbols = ['&', '@', ['<', '&lt;'], ['>', '&gt']];

Adresáře

Můžete nastavit adresáře, kde bude texyla hledat své soubory.

Výchozí nastavení

options.addr = {
        // témata vzhledů
        css: Texyla.addrBase + 'themes/',

        // ikonky tlačítek apod.
        icons: Texyla.addrBase + 'icons/',

        // smajlíky
        emoticons: Texyla.addrBase + 'emoticons/',

        // náhled
        ajax: Texyla.addrBase + 'texyla.php'
};

kdy Texyla.addrBase je adresář, ve kterém se nachází javascriptový soubor s Texylou.

Praktické může být například nastavení adresáře se smajlíky pokud je nechcete mít v adresáři Texyly.

options.addr.emoticons = '/mojesmajly';

Klávesové zkratky

Odeslání formuláře z Texyly klávesovou zkratkou

Odeslat formulář je možno pomocí Ctrl + S nebo alternativně Ctrl + Shift + S. Pokud je to ovšem povoleno (ve výchozím nastavení pro admin).

options.submitOnCtrlS = true;
// přiřazení hodnoty false tuto možnost vypne

Seznam klávesových zkratek

V Texyle můžete použít několik klávesových zkratek.

Význam	Zkratka	Alternativní zkratka	Poznámka
Tučně (strong)	Ctrl + B	Ctrl + Shift + B
Kurzíva (em)	Ctrl + I	Alt + Ctrl + I
Odeslat formulář (submit)	Ctrl + S	Ctrl + Shift + S	Možno vypnout v nastavení pomocí `options.submitOnCtrlS`
Vložení tabulátoru	Tab

Alternativní zkratky jsem zavedl kvůli prohlížeči Opera, kterou nedokážu přemluvit, že nemá brát zřetel na své vlastní klávesové zkratky. (Poradíte? )

Texyla API

Pokud instanci Texyly přiřadíte proměnné, můžete ji později zvnějšku ovládat. Např.:

<form>
<div>
<textarea name="txt" rows="10" cols="60" id="txt"></textarea>
</div>
<script type="text/javascript">
Texyla1 = new Texyla(Texyla.configurator.forum('txt'));
</script>
<p><a href="javascript:Texyla1.Texy.replaceSelection(':-)');">:-)</a></p>
</form>

Podrobnosti viz nahlédnutí do zdrojového kódu

Stylování náhledu

Náhled má css třídu preview.

/* všechny tagy strong v náhledu červeně */
.preview strong {color:red;}

PHP rozhraní pro zpracování Texy

Texylu lze nyní použít i na zpracování textů po odeslání z formuláře včetně konfigurace. Implementace je velice jednoduchá. Stačí do skriptu ve kterém ji chcete použít, includovat soubor texyla.php:

include('/texyla/texyla.php'); //cestu upravte podle vašeho systému.

A následně zavolat funkci texyla(), s dvěma až čtyřmi parametry.

$vystup = texyla($vstup, 'forum', $charset, false);

$vstup je text, který chcete zpracovat
'forum' je volba konfigurace pro zpracování textu pomocí Texy. Jsou tři základní možnosti:
- 'admin' → výchozí nastavení, povoleny snad všechny vymoženosti Texy.
- 'forum' → safeMode, zakázané nadpisy, reference, vkládání HTML, …
- 'webalize' → Toto nevybírá žáden konfigurační soubor, ale slouží k odstranění diakritiky a zvláštních znaků a mezer z textu. Tato funkce vyžaduje text v utf-8 kódování, a také funkci iconv.

$text = 'Příliš žluťoučký kůň pěl nádherné ódy';
echo texyla($text, 'webalize');
// pro utf-8 není třeba zadávat kódování při volání texyla()
// vypíše prilis-zlutoucky-kun-pel-nadherne-ody

$charset → kódóvání v kterém je text, 'utf-8' je defaultní režim, není třeba ho uvádět. Při jiném kódování je nutné aby byla v php dostupná funkce iconv(). (texyla její existenci testuje)

Samozřejmě můžete upravit konfiguráky k obrazu svému, podle svých potřeb.

Zpětná lomítka aneb directiva Magic_quotes_gpc

V případě, že je v php.ini nastaveno:

Magic_quotes_gpc = on;

tak server automaticky doplňuje zpětná lomítka před vybranou skupinu znaků.

Příklad z dokumentace k PHP:

<?php
echo get_magic_quotes_gpc();         // 1
echo $_POST['lastname'];             // O\'reilly
echo addslashes($_POST['lastname']); // O\\\'reilly

if (!get_magic_quotes_gpc()) {
    $lastname = addslashes($_POST['lastname']);
} else {
    $lastname = $_POST['lastname'];
}

echo $lastname; // O\'reilly
$sql = "INSERT INTO lastnames (lastname) VALUES ('$lastname')";
?>

Zkrátka, ošetříte přenesené proměnné a najednou se množí zpětná lomítka. Pokud s tím nepočítáte, je to problém, stejně jako v případě, že se slashováním počítáte, a někdo to vypne (tato directiva je právě kvůli zmatkům v PHP verze 6 odstraněna).

Někteří lidé zaplé slashování mají rádi, jiní jsou zapřísáhlými odpůrci.

Bohužel se nelze spolehnout na to, že tato direktiva bude všude stejně nastavena, navíc může dojít se změnou verze php na serveru i ke změně tohoto nastavení.

Zvykl jsem si, a starám se o slashování znaků před uložením do databáze nebo někam do souboru, sám. Proto používám funkci removeMagicQuotesGpc(); která mi v případě že je server nastaven na přidávání slashů toto ošetření odstraní.

Tento přístup doporučuji i vám.

Jak na to

Stačí na začátku vašich scriptů, ještě před prvním použitím přenesených proměnných ($_GET, $_POST, $_COOKIE, $_REQUEST, $_FILES) includovat soubor s Texylou a zavolat funkci:

<?php
require_once(dirname(__FILE__) . "/texyla/texyla.php");
removeMagicQuotesGpc();
?>

která je součástí balíku s Texylou.

FSHL

V Texyle je obarvovač kódu FSHL. Jeho zapnutí nebo vypnutí řídí proměnná $useFSHL v jednotlivých konfigurácích.

// zapne barvení kódu
$useFSHL = true;

// a vypne se to takto
$useFSHL = false;

Editace uloženého textu

Protože převést zpět vygenerované HTML do Texy syntaxe nejde (výjimky jen potvrzují pravidlo, Texy má větší vyjadřovací schopnost než HTML), je nutno pro pozdější editaci uložit i zdrojový kód v Texy syntaxi, který se následně při editaci vloží do textarey. Vygenerované html používáte při zobrazení článků.

Ukládat obě verze téhož textu se může někomu zdát jako plýtvání místem v databázi, ale věřte, že je pro server méně náročné vytáhnout vygenerované HTML a to zobrazit, než při generování každé stránky ještě navíc použít Texylu (Texy).

Jan Marek (www.janmarek.net, mail zavináč janmarek tečka net)
Petr Vaněk (krteczek zavináč jaknato tečka com, ICQ: 337913080)
Lukáš Voda (lukas.voda zavináč gmail tečka com)