Question

我正在使用BBcode编辑器，并想知道如何使用Javascript切换选择标签（类似于文本编辑菜单在StackOverflow上的工作方式）。

示例：

textarea的

Lorem ipsum dolor sit amet.

如果您选择文字＆＃39; ipsum dolor＆＃39;然后点击粗体按钮，它就会变成

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

如果再次点击粗体按钮，则会删除标签。

谢谢！

Answer 1

您可以获取所选的文本插入符号位置，设置插入符然后插入文本：

TL; DS（太长没有滚动）

有一个TL; DR在底部。

获得Caret职位

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

Textarea用Javascript切换选择标签

1 个答案: