1. krok: vytvorenie funkcií v javascripte

Najprv si vytvoríme javascriptový súbor, ktorý nazveme texy.js a umiestnime ho do adresára

app/webroot/js/texy.js

do tohto súboru umiestnime nasledujúci kód

function help_texy(code){

        document.getElementById('hhhh').innerHTML = code;

}

// http://www.alexking.org - LGPL
function insertAtCursor(myField, prefix, postfix) {
        var re = new RegExp("^(.*\\S)(\\s*)$");
  myField.focus();
  //IE support
  if (document.selection) {
    sel = document.selection.createRange();
                var selection = sel.text;
                var wasEmpty = (selection == "");
                var space = "";
                if (!wasEmpty) {
                        var matches = selection.match(re);
                        if (matches) {
                                selection = RegExp.$1;
                                space = RegExp.$2;
                        }
                }
    sel.text = prefix+selection+postfix+space;
                sel.collapse(false);
                if (wasEmpty) {
                        sel.moveEnd('character',-(prefix.length+1))
                }
                sel.select();
  }
  //MOZILLA/NETSCAPE support
  else {
                if (myField.selectionStart || myField.selectionStart == '0') {
                        var startPos = myField.selectionStart;
                        var endPos = myField.selectionEnd;
                        var selection = myField.value.substring(startPos, endPos);
                        var wasEmpty = (startPos == endPos);
                        var space = "";
                        if (!wasEmpty) {
                                var matches = selection.match(re);
                                if (matches) {
                                        selection = RegExp.$1;
                                        space = RegExp.$2;
                                }
                        }
                        myField.value = myField.value.substring(0, startPos)
                                                                                + prefix+selection+postfix+space
                                                                                + myField.value.substring(endPos, myField.value.length);

                        var newPosition;
                        if (wasEmpty) {
                                newPosition = startPos+prefix.length;
                        } else {
                                newPosition = startPos+prefix.length+selection.length+postfix.length+space.length;
                        }
                        myField.setSelectionRange(newPosition, newPosition);
                } else {
                        myField.value += prefix+postfix;
                        myField.setSelectionRange(startPos+prefix.length, startPos+prefix.length);
                }
        }
}

Na vysvetlenie kódu vyššie. Prvá funkcia nazvaná help_texy() nám umožní zobraziť nápovedu pri prechode myšou nad daným formátovacím tlačítkom.

Druhá funkcia nazvaná insertAtCursor() nám umožní efektívne formátovať text vkladaním direktív texy. Autorom tejto funkcie je Alex King Táto funkcia nám okrem iného umožňuje označiť text, stlačiť pri označenom texte formátovacie tlačítko a označený text sa celý zformátuje (ukážku funkčnosti môžeme vidieť napríklad v diskusii pod týmto článkom).

2. krok: vloženie javascript súboru

Javascript súbor texy.js máme vytvorený a teraz nám stačí načítať tento súbor v nášom layoute. Do súboru app/views/lay­outs/default.ctp vložíme nasledovný kód

<?php echo $javascript -> link('texy.js'); ?>

3. krok: helper pre formátovacie tlačítka

Posledným krokom je vytvorenie helperu pre formátovacie tlačítka. Vytvoríme súbor app/views/hel­pers/texy.php do ktorého umiestníme nasledujúci kód

class TexyHelper extends AppHelper
{
        function createMenuBar()
        {
                $output = '<input type="button" onclick="insertAtCursor(document.commentsAddForm.CommentText, \'**\', \'**\')" onmousemove="help_bbcode(\''.__("TEXY_B",true).'\')" value="b"/>
                <input type="button" onclick="insertAtCursor(document.commentsAddForm.CommentText, \'//\', \'//\')" onmousemove="help_bbcode(\''.__("TEXY_I",true).'\')" value="i"/>
                <input type="button" onclick="insertAtCursor(document.commentsAddForm.CommentText, \'/---code\n\', \'\n\\\---\')" onmousemove="help_bbcode(\''.__("TEXY_CODE",true).'\')" value="code"/>
                <input type="button" onclick="insertAtCursor(document.commentsAddForm.CommentText, \'"'.__("TEXY_URL_NAME",true).'":\', \'\')" onmousemove="help_bbcode(\''.__("TEXY_URL",true).'\')" value="link"/>

                <input type="button" onclick="insertAtCursor(document.commentsAddForm.CommentText, \'"'.__("TEXY_EMAIL_NAME",true).'":\', \'\')" onmousemove="help_bbcode(\''.__("TEXY_EMAIL",true).'\')" value="email"/>
                <input type="button" onclick="insertAtCursor(document.commentsAddForm.CommentText, \'\', \' .{color:red}\')" onmousemove="help_bbcode(\''.__("TEXY_COLOR",true).'\')" value="color"/>
                <input type="button" onclick="insertAtCursor(document.commentsAddForm.CommentText, \'\', \' .<>\')" onmousemove="help_bbcode(\''.__("TEXY_CENTER",true).'\')" value="center"/>
                <input type="button" onclick="insertAtCursor(document.commentsAddForm.CommentText, \'\', \' .>\')" onmousemove="help_bbcode(\''.__("TEXY_RIGHT",true).'\')" value="right"/>';

                return $this -> output($output);
        }
}

Do súboru app/app_contro­ller.php vložíme kód

var $helpers = array('Texy');

Ešte nesmieme zabudnúť pridať do súboru app/locale/tvoj_ja­zyk/LC_MESSAGES/de­fault.po nasledujúce texty pre preklad

msgid "TEXY_B"
msgstr "Hrubý text: **hrubý text**"

msgid "TEXY_CODE"
msgstr "Kód: /---code kód v programovacom jazyku \\\\\\---"

msgid "TEXY_I"
msgstr "Šikmé písmo: //šikmý text//"

msgid "TEXY_URL"
msgstr "Vložiť odkaz: "názov odkazu":http://www.odkaz.sk"

msgid "TEXY_URL_NAME"
msgstr "názov odkazu"

msgid "TEXY_EMAIL"
msgstr "Vložiť odkaz: "názov email adresy":email@email.sk"

msgid "TEXY_EMAIL_NAME"
msgstr "názov email adresy"

msgid "TEXY_COLOR"
msgstr "Farba textu: farebny text .{color:farba}"

msgid "TEXY_CENTER"
msgstr "Zarovnanie textu na stred: text .<>"

msgid "TEXY_RIGHT"
msgstr "Zarovnanie textu napravo: text .>"

msgid "TEXY_HELP_TEXT"
msgstr "Tip: vyššie uvedenými tlačítkami môžete efektívne formátovať text"

Týmto máme všetky potrebné kódy vytvorené a môžeme do nášho view zakomponovať formátovacie tlačítka pre texy tak, ako to môžeme vidieť v diskusii k tomuto článku.

Stačí nám zavolať v ľubovoľnom view súbore nasledovný kód

<? echo $texy -> createMenuBar(); ?>

Ak chceme zobraziť nápovedu k jednotlivým tlačítkam, musíme vložiť do nášho view súboru nasledovný kód

<div id="hhhh"><? __('TEXY_HELP_TEXT'); ?></div>

Vaše námety a pripomienky rád uvítam v diskusii k článku.

Najprv si musíme stiahnuť zdrojové kódy Texy, ktoré nájdeme na oficiálnej stránke Texy. V dobe písania článku je aktuálna verzia Texy 2 beta.

Po stiahnutí archívu nám stačí súbor texy.compact.php, čo je kompletné texy v jednom súbore.

Súbor texy.compact.php rozbalíme do adresára app/vendors/texy/

Následne vytvoríme súbor app/views/hel­pers/texy.php do ktorého umiestníme nasledujúci kód

vendor('texy'.DS.'texy.compact');

class TexyHelper extends AppHelper {

  function show($string)
  {
     $texy = new texy();

     $output = $texy -> process($string);

     return $this -> output($output);
  }

}

Posledný krok je povoliť používanie helperu texy v našich view súboroch a to zapísaním nasledovného kódu do súboru app/app_contro­ller.php

var $helpers = array("Texy");

Týmto máme všetko hotové a pri zobrazení napríklad príspevkov v diskusii môžeme volať nasledovný kód

echo $texy -> show($article["Comment"]["text"]);

V budúcej časti sa môžeme tešiť na článok o formátovacích tlačítkach k texy, ktoré nám uľahčia formátovanie príspevkov v diskusiách.