Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: BBCode
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Fafu
24.06.2009, 13:22:55
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
24.06.2009, 13:38:04
No to wywołaj po prostu np. z linka insertAtCursor, tylko sobie pobierz jakoś uchwyt do textarea.
Fafu
24.06.2009, 13:58:35
erix: ?
Widziałeś tą moją funkcje w ogóle? (jest na dole)
erix
24.06.2009, 14:03:09
Ale nie pobieraj uchwytu via DOM, tylko spróbuj z document.forms.
wookieb
24.06.2009, 14:05:56
Co za różnica? To i to zwróci to samo.
erix
24.06.2009, 14:26:46
Nie zawsze. 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
24.06.2009, 14:32:21
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
24.06.2009, 15:12:56
Fakt, mój błąd:
Kod
list += "[li]" + element + "[/li]\n";

Zamiast dopisywania do zmiennej, dorzuć tu insertAtCursor.
wookieb
24.06.2009, 15:14:33
Ja rozumiem ze chodzi ci o WYSIWYGA tak?
Jeżeli tak to uzyj tinymce z pluginem bbcode, ponieważ pisane wlasnego jest dużo trudniejsze.
Fafu
24.06.2009, 15:24:55
Cytat(erix @ 24.06.2009, 16:12:56 ) *
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.

Cytat(wookieb @ 24.06.2009, 16:14:33 ) *
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 winksmiley.jpg Wszystkie tagi mam już zrobione tylko zostały mi te listy winksmiley.jpg tinymce? podziękuję za ten kombajn tongue.gif
erix
24.06.2009, 15:39:01
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
24.06.2009, 17:23:56
Cytat(erix @ 24.06.2009, 16:39:01 ) *
I przyda się jeszcze to: http://blog.vishalon.net/index.php/javascr...on-in-textarea/

No i elegancko wszystko działa 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 winksmiley.jpg
pozdrawiam
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.