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

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

Пример:

Textarea

Lorem ipsum dolor sit amet.

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

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

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

Спасибо!


person skimberk1    schedule 12.02.2012    source источник
comment
Я не знаю BBcode, но разве вы не можете просто использовать что-то вроде document.getElementById("editor").selectionStart, чтобы найти начальную точку, а затем вставить [b] и то же самое для selectionEnd? Чтобы удалить их, вы можете захотеть найти в тексте [b] и [/ b], чтобы они не находились точно в нужном месте, чтобы это работало ...   -  person karnok    schedule 12.02.2012


Ответы (1)


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

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

person Jason    schedule 12.02.2012
comment
Mozilla и Webkit не поддерживают document.selection. Они поддерживают selectionStart и selectionEnd для фактического текстового элемента. Тем не менее, хорошая попытка! - person Volomike; 08.02.2015
comment
Также вы не определили функцию getSelectionBoundary (). - person Volomike; 08.02.2015