Geek Answers Handbook

Paste tags around selected text

I looked around, but other answers really don't help me.

I want to create a small WYSIWYG editor, there should only be options for adding links and adding lists. My question is how to add tags around the selected text in the text box when one of the links / buttons is clicked (for example, “Add Link”)?

+5
source share
3 answers

I wrote a jQuery plugin that does this (and which I really have to document) that you can download from http://code.google.com/p/rangyinputs/downloads/list .

, :

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

jQuery getInputSelection() setInputSelection() IE <= 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>
Hide result

IE <= 8, getInputSelection() setInputSelection() :

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

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

:

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

More articles:


All Articles