contenteditable=true로 설정하여 div의 편집 모드를 활성화하면 DIV에 텍스트 상자처럼 내용을 입력할 수 있습니다.
더 이상 그 주제에 대해 이야기하지 마세요. 커서 위치를 가져오거나 설정하는 방법은 다음과 같습니다.
커서 변경 이벤트를 문서에 바인딩합니다. 커서 위치를 기록하는데 사용됩니다.
이런 방법으로 DIV의 커서 위치를 알 수 있습니다.
함수 insertHtmlAtCaret(html) {
var sel, 범위;
if (window.getSelection) {
// IE9 및 비 IE
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
범위 = sel.getRangeAt(0);
range.deleteContents();
// Range.createContextualFragment()는 여기서 유용하지만
// 비표준이며 모든 브라우저에서 지원되지 않습니다(예: IE9)
var el = document.createElement("div");
el.innerHTML = html;
var frag = document.createDocumentFragment(), node, lastNode;
while ( (노드 = el.firstChild) ) {
lastNode = frag.appendChild(노드);
}
range.insertNode(frag);
// 선택 항목 유지
if (마지막 노드) {
범위 = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(범위);
}
}
} else if (document.selection && document.selection.type != "컨트롤") {
//IE<9
document.selection.createRange().pasteHTML(html);
}
}