BBCode Opcje

[Fafu]

Witam,
korzystając z gotowej funkcji insertAtCursor napisałem funkcje która dodaje mi do textarea listę numerowaną. Wszystko ładnie działa tylko chciałbym żeby to dodawało w czasie realnym (tak jak jest w IPB). Niestety nie wiem jakby się za to zabrać :/ Proszę o pomoc.

Kod

function insertAtCursor(txtarea, open, close, newTXT)    {

    if (document.selection) {
        txtSel    = (document.selection.createRange().text)    ? document.selection.createRange().text : newTXT;
        txtarea.focus();
        sel = document.selection.createRange();
        sel.text = open + txtSel + close;
    } else if (txtarea.selectionStart || txtarea.selectionStart == '0') {

        var selLength    = txtarea.textLength;
        var selStart    = txtarea.selectionStart;
        var selEnd        = txtarea.selectionEnd;

        strSelect    = txtarea.value.substr(txtarea.selectionStart, txtarea.selectionEnd - txtarea.selectionStart)
        txtSel        = (strSelect != '')    ? open + strSelect + close : open + newTXT + close;

        newTXT            = txtSel;
        var startPos    = txtarea.selectionStart;
        var endPos        = txtarea.selectionEnd;
        txtarea.value    = txtarea.value.substring(0, startPos)+ newTXT + txtarea.value.substring(endPos, txtarea.value.length);
    } else {
        txtarea.value += newTXT;
    }
}

var list = "[ol]\n";

function list_ordered() {
    var element;
    element = prompt('Wprowadź element listy:');
    if(element) {
        list += "[li]" + element + "[/li]\n";
        list_ordered();
    } else {
        insertAtCursor(document.getElementById('tresc'), list, '[/ol]', '');
        list = "[ol]\n";
    }
}

[erix]

No to wywołaj po prostu np. z linka insertAtCursor, tylko sobie pobierz jakoś uchwyt do textarea.

[Fafu]

erix: ?
Widziałeś tą moją funkcje w ogóle? (jest na dole)

[erix]

Ale nie pobieraj uchwytu via DOM, tylko spróbuj z document.forms.

[wookieb]

Co za różnica? To i to zwróci to samo.

[erix]

Nie zawsze. (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)

Miałem kiedyś taki przypadek (nie pamiętam dokładnie kontekstu), że tylko przez standardowe tablice niektóre akcje działały.

[Fafu]

No ale czytaj ze zrozumieniem: wszystko działa tylko mi chodzi żeby to wszystko pokazywało się w realnym czasie (zobacz sobie jak to jest z tymi listami w IPB). W moim skrypcie dopiero jak się wpisze wszystkie dane to pojawia się lista.

[erix]

Fakt, mój błąd:

Kod

list += "[li]" + element + "[/li]\n";

Zamiast dopisywania do zmiennej, dorzuć tu insertAtCursor.

[wookieb]

Ja rozumiem ze chodzi ci o WYSIWYGA tak?
Jeżeli tak to uzyj tinymce z pluginem bbcode, ponieważ pisane wlasnego jest dużo trudniejsze.

Ten post edytował wookieb 24.06.2009, 15:19:42

[Fafu]

Fakt, mój błąd:

Kod

list += "[li]" + element + "[/li]\n";

Zamiast dopisywania do zmiennej, dorzuć tu insertAtCursor.

tylko że np. kursor jest na początku i się da insert [ ul ] i [ /ul ] to kursor jest nadal na początku. Dobrym planem byłoby przerobienie funkcji insertAtCursor aby po dodaniu tagów dawał kursor między nimi.

Ja rozumiem ze chodzi ci o WYSIWYGA tak?
Jeżeli tak to uzyj tinymce z pluginem bbcode, ponieważ pisane wlasnego jest dużo trudniejsze.

Nie chodzi mi o WYSIWYGA (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) Wszystkie tagi mam już zrobione tylko zostały mi te listy (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) tinymce? podziękuję za ten kombajn (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)

[erix]

Hmm, stosuję takiego małego hacka na forum [;

Kod

var cS = area.value.substr(0, area.selectionStart);
                var cE = area.value.substr(area.selectionStart);

                area.value = cS+'[manual]'+func+'[/manual]'+cE;
                area.focus();

I przyda się jeszcze to: http://blog.vishalon.net/index.php/javascr...on-in-textarea/

[Fafu]

I przyda się jeszcze to: http://blog.vishalon.net/index.php/javascr...on-in-textarea/

No i elegancko wszystko działa (IMG:http://forum.php.pl/style_emoticons/default/guitar.gif)
Daje kod jakby się komuś przydał:

Kod

function insertAtCursor(txtarea, open, close, newTXT)    {

    if (document.selection) {
        txtSel    = (document.selection.createRange().text)    ? document.selection.createRange().text : newTXT;
        txtarea.focus();
        // PRZY Internet Explorer POZBYWAMY SIE \n
        open = (open == "[ul]\n") ? "[ul]" : open;
        open = (open == "[ol]\n") ? "[ol]" : open;
        close = (close == "[/li]\n") ? "[/li]" : close;
        // ---------------
        sel = document.selection.createRange();
        sel.text = open + txtSel + close;
        setCaretPosition(txtarea, (txtarea.value.length - sel.text.length - close.length));
    } else if (txtarea.selectionStart || txtarea.selectionStart == '0') {

        var selLength    = txtarea.textLength;
        var selStart    = txtarea.selectionStart;
        var selEnd        = txtarea.selectionEnd;
        
        strSelect    = txtarea.value.substr(txtarea.selectionStart, txtarea.selectionEnd - txtarea.selectionStart)
        txtSel        = (strSelect != '')    ? open + strSelect + close : open + newTXT + close;
        eee = (newTXT != '') ? newTXT + close : '';
        newTXT            = txtSel;
        var startPos    = txtarea.selectionStart;
        var endPos        = txtarea.selectionEnd;
        cos = txtarea.value.substring(0, startPos);
        txtarea.value    = txtarea.value.substring(0, startPos)+ newTXT + txtarea.value.substring(endPos, txtarea.value.length);

        poss = (strSelect != '') ? (cos.length + txtSel.length) : (eee.length + selStart + open.length);
        setCaretPosition(txtarea, poss);
    } else {
        txtarea.value += newTXT;
    }
}

function setCaretPosition(ctrl, pos){
    if(ctrl.setSelectionRange)
    {
        ctrl.focus();
        ctrl.setSelectionRange(pos,pos);
    }
    else if (ctrl.createTextRange) {
        var range = ctrl.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
    }
}

function doGetCaretPosition (ctrl) {
    var CaretPos = 0;    // IE Support
    if (document.selection) {
    ctrl.focus ();
        var Sel = document.selection.createRange ();
        Sel.moveStart ('character', -ctrl.value.length);
        CaretPos = Sel.text.length;
    }
    // Firefox support
    else if (ctrl.selectionStart || ctrl.selectionStart == '0')
        CaretPos = ctrl.selectionStart;
    return (CaretPos);
}

function list_ordered() {
    insertAtCursor(document.getElementById('tresc'), "[ol]\n", "[/ol]", '');
    list();
}

function list_unordered() {
    insertAtCursor(document.getElementById('tresc'), "[ul]\n", "[/ul]", '');
    list();
}

function list() {
    var element;
    element = prompt('Wprowadź element listy:', '');
    if(element) {
        insertAtCursor(document.getElementById('tresc'), "[li]", "[/li]\n", element);
        list();
    } else {
        // kursor na koniec
        setCaretPosition(document.getElementById('tresc'), (doGetCaretPosition(document.getElementById('tresc')) + 5));
    }
}

Sprawdzałem na Chrome, IE i FF. Jeśli ktoś mógłby sprawdzić na inny przeglądarkach byłbym wdzięczny (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)
pozdrawiam