검색결과 리스트
글
커서 위치에 링크 추가하기
컴퓨터 관련자료/front-end
2015. 9. 15. 10:21
//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 :
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);
}
'컴퓨터 관련자료 > front-end' 카테고리의 다른 글
모든 것은 수학이다... 라는 무서운 이야기 (1) | 2016.08.13 |
---|---|
Application Cache (0) | 2015.10.07 |
커서 위치에 링크 추가하기 (0) | 2015.09.15 |
웹스톰에서 meta charset="UTF-8" 적용했으나 한글 깨질때 (0) | 2015.08.28 |
input type=file css 수정하기 (0) | 2015.08.26 |
HTML table export to excel (0) | 2015.07.29 |
쓸때마다 헷갈리는 word-break, word-wrap, white-space (0) | 2015.05.20 |
정규식 (0) | 2015.05.18 |
div and span, block and inline (0) | 2015.05.11 |
(HTML, JS, CSS 연습장) JSFIDDLE (3) | 2014.07.09 |
HTML5가 나오기까지 (1) | 2014.07.02 |