Question

我看了一眼，但其他答案并没有真正帮助我。

我想创建一个小的WYSIWYG编辑器，只需要添加链接和添加列表的选项。我的问题是当点击其中一个链接/按钮（例如“添加链接”）时，如何在文本区域中的选定文本周围添加标签？

Answer 1

我编写了一个jQuery插件，可以执行此操作（我必须记录这些插件），您可以从http://code.google.com/p/rangyinputs/downloads/list下载。

以下内容适用于所有主流浏览器并围绕所选文本，并还原选区以包含以前选定的文本：

var url = "https://stackoverflow.com/";
$("#yourTextAreaId").surroundSelectedText('<a href="' + url + '">', '</a>');

对于没有jQuery的解决方案，您可以使用this answer中的getInputSelection()和setInputSelection()函数来兼容IE＆lt; = 8，如下所示：

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 offsetToRangeCharacterMove(el, offset) {
    return offset - (el.value.slice(0, offset).split("\r\n").length - 1);
}

function setInputSelection(el, startOffset, endOffset) {
    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
        el.selectionStart = startOffset;
        el.selectionEnd = endOffset;
    } else {
        var range = el.createTextRange();
        var startCharMove = offsetToRangeCharacterMove(el, startOffset);
        range.collapse(true);
        if (startOffset == endOffset) {
            range.move("character", startCharMove);
        } else {
            range.moveEnd("character", offsetToRangeCharacterMove(el, endOffset));
            range.moveStart("character", startCharMove);
        }
        range.select();
    }
}

function surroundSelectedText(el, before, after) {
  var val = el.value;
  var sel = getInputSelection(el);
  el.value = val.slice(0, sel.start) +
             before +
             val.slice(sel.start, sel.end) +
             after +
             val.slice(sel.end);
  var newCaretPosition = sel.end + before.length + after.length;
  setInputSelection(el, newCaretPosition, newCaretPosition);
}

function surroundWithLink() {
  surroundSelectedText(
    document.getElementById("ta"),
    '<a href="https://stackoverflow.com/">',
    '</a>'
  );
}

<input type="button" onmousedown="surroundWithLink(); return false" value="Surround">
<br>
<textarea id="ta" rows="5" cols="50">Select some text in here and press the button</textarea>

如果您不需要支持IE＆lt; = 8，则可以使用以下内容替换getInputSelection()和setInputSelection()函数：

function getInputSelection(el) {
  return {
    start: el.selectionStart,
    end: el.selectionEnd
  };
}

function setInputSelection(el, start, end) {
  el.setSelectionRange(start, end);
}

Answer 2

您可以使用以下功能：

function addUrl(url) {
    var textArea = $('#myTextArea');
    var start = textArea[0].selectionStart;
    var end = textArea[0].selectionEnd;
    var replacement = '<a href="'+url+'">' + textArea.val().substring(start, end) + '</a>';
    textArea.val(textArea.val().substring(0, start) + replacement + textArea.val().substring(end, textArea.val().length));
}

Answer 3

我想我只会使用http://batiste.dosimple.ch/blog/posts/2007-09-11-1/rich-text-editor-jquery.html

在所选文本周围插入标签

3 个答案: