Textarea переключать теги выбора с помощью Javascript - PullRequest
Новая
       17

Textarea переключать теги выбора с помощью Javascript

0 голосов
/ 12 февраля 2012

Я работаю над редактором BBcode, и мне было интересно, как переключать теги при выделении с помощью Javascript (аналогично тому, как работает меню редактирования текста в StackOverflow).

Пример:

Textarea 

Lorem ipsum dolor sit amet.

Если вы выделите текст «ipsum dolor» и нажмете на кнопку, выделенную жирным шрифтом, он станет 

Lorem [b]ipsum dolor[/b] sit amet.

Если вы нажмете кнопку еще раз, теги будут удалены.

Спасибо!

1 Ответ

2 голосов
/ 12 февраля 2012

Вы можете получить выбранные позиции курсора текста, установить каретку и затем вставить свой текст:

TL; DS (Слишком долго не прокручивать)

Есть TL; DR ввнизу.

Получить позиции каретки 

function getInputSelection(el) {
    var start = 0, end = 0, normalizedValue, range,
        textInputRange, len, endRange;

    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
        start = el.selectionStart;
        end = el.selectionEnd;
    } else {
        range = document.selection.createRange();

        if (range && range.parentElement() == el) {
            len = el.value.length;
            normalizedValue = el.value.replace(/\r\n/g, "\n");

            // Create a working TextRange that lives only in the input
            textInputRange = el.createTextRange();
            textInputRange.moveToBookmark(range.getBookmark());

            // Check if the start and end of the selection are at the very end
            // of the input, since moveStart/moveEnd doesn't return what we want
            // in those cases
            endRange = el.createTextRange();
            endRange.collapse(false);

            if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
                start = end = len;
            } else {
                start = -textInputRange.moveStart("character", -len);
                start += normalizedValue.slice(0, start).split("\n").length - 1;

                if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
                    end = len;
                } else {
                    end = -textInputRange.moveEnd("character", -len);
                    end += normalizedValue.slice(0, end).split("\n").length - 1;
                }
            }
        }
    }

    return {
        start: start,
        end: end
    };
}

Установить позицию каретки 

function setCaretPosition(elemId, caretPos) {
    var elem = document.getElementById(elemId);

    if(elem != null) {
        if(elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        }
        else {
            if(elem.selectionStart) {
                elem.focus();
                elem.setSelectionRange(caretPos, caretPos);
            }
            else
                elem.focus();
        }
    }
}

Вставить текст 

function insertTextAtCaret(el, text) {
    var pos = getSelectionBoundary(el, false);
    var newPos = pos + text.length;
    var val = el.value;
    el.value = val.slice(0, pos) + text + val.slice(pos);
    setSelection(el, newPos, newPos);
}

Вставить 

var pos = getInputSelection($('#textboxID'));
setCaretPosition($('#textboxID'), pos.start);
insertTextAtCaret($('#textboxID'), '[b]');
setCaretPosition($('#textboxID'), pos.end);
insertTextAtCaret($('#textboxID'), '[/b]');

Затем, чтобы отменить его, просто проверьте выделение текста, когда они нажимают на кнопку, и если оно заключено в объект, который вы нажали (например, [b] ... [/ b], при нажатии кнопки B)затем просто удалите этот текст из выделения текстового поля.

TL; DR

Вместо этого получите плагин уценки http://markitup.jaysalvat.com/home/

или посмотрите на эти http://www.queness.com/post/212/10-jquery-and-non-jquery-javascript-rich-text-editors

...