Texy v cakePHP - javascript formátovacie tlačítka

Autor: Tibor Piňo, Vytvorený: 30. 09. 2007 21:20

V minulom článku o texy sme si povedali, ako zakomponovať tento formátovací systém do aplikácie postavenej na cakePHP. Dnes si ukážeme, ako môžeme šikovne formátovať text pre texy.

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.