커서 위치에 링크 추가하기

//caret
var addHtmlAtCaret = function () {
var sel, range;
if (window.getSelection) {
// IE9 and non-IE
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) { /*After the user clicks on the page, rangeCount is 1*/
range = sel.getRangeAt(0); /*returns range object*/
range.deleteContents(); /*removes the contents of the Range from the Document*
}
}
};


sel, range 객체의 값은 다음과 같은 형식으로 들어온다.

sel :

Selection
    1. anchorNode: text
    2. anchorOffset: 3
    3. baseNode: text
    4. baseOffset: 3
    5. extentNode: text
    6. extentOffset: 3
    7. focusNode: text
    8. focusOffset: 3
    9. isCollapsed: true
    10. rangeCount: 1
    11. type: "Caret"
    12. __proto__: Selection


range :

Range
    1. collapsed: true
    2. commonAncestorContainer: text
    3. endContainer: text
    4. endOffset: 3
    5. startContainer: text
    6. startOffset: 3
    7. __proto__: Range



위의 값을 이용해서 원하는 곳에 내용을 추가해준다.

addrHtml에 커서의 위치에 넣고 싶은 값을 넣는다.

(나는 링크 추가할 때 이용함)


var el = document.createElement("div");
el.innerHTML = addrHtml;
$compile(el)($scope);
var frag = document.createDocumentFragment(), node, lastNode;
while ((node = el.firstChild)) {
lastNode = frag.appendChild(node);
}
range.insertNode(frag);

// Preserve the selection
if (lastNode) {
range = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}