Insert tags around selected text

Question

I've had a look around but the other answers don't really help me out.

I want to create a small WYSIWYG editor, there only needs to be the options to add links and add lists. My question is how do I append tags around selected text in a textarea when one of the links/button (e.g. "Add Link") is clicked?

Answer 1

I've written a jQuery plug-in that does this (and which I really must document), which you can download from http://code.google.com/p/rangyinputs/downloads/list.

The following will work in all major browsers and surrounds the selected text, and restores the selection to contain the previously selected text:

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

For a solution without jQuery, you could use the getInputSelection() and setInputSelection() functions from this answer for compatibility with IE <= 8 as follows:

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>

If you don't need support for IE <= 8, you can replace the getInputSelection() and setInputSelection() functions with the following:

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

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

Answer 2

You can use a function like the following:

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));
}