이 기사에서는 편집 가능한 div에서 지정된 위치에 컨텐츠를 삽입하기 위해 JS를 구현하는 방법에 대해 설명합니다. 우리가 사용하는 편집기와 마찬가지로, 우리는 귀하의 참조를 위해 귀하와 공유합니다. 특정 구현 방법은 다음과 같습니다.
먼저 div에 편집 모드를 활성화하십시오
코드 코드를 다음과 같이 복사하십시오. <div contenteditable = true id = "divtest"> </div>
ContentEdable = true를 설정하여 DIV의 편집 모드를 켭니다. 이런 식으로 DIV는 텍스트 상자와 같은 컨텐츠를 입력 할 수 있습니다.
더 이상 말이되지 않습니다. 커서 위치를 얻거나 설정하는 방법은 다음과 같습니다.
2 단계 :
div에서 커서 위치를 얻으십시오
② 커서 위치를 변경하십시오
다음과 같이 코드를 복사하십시오. var cursor = 0; // 커서 위치
document.onselectionchange = function () {
var 범위 = document.selection.createrange ();
var srcele = range.parentElement (); // 현재 요소를 가져옵니다
var copy = document.body.creatextrange ();
copy.movetoelementtext (srcele);
for (cursor = 0; copy.compareendpoints ( "StartTostart", 범위) <0; cursor ++) {
copy.movestart ( "문자", 1); // 커서 위치를 변경합니다. 실제로 커서 수를 기록하고 있습니다.
}
}
커서 변경 이벤트를 문서에 바인딩하십시오. 커서 위치를 기록하는 데 사용됩니다.
이렇게하면 Div의 커서 위치를 얻을 수 있습니다.
다음과 같이 코드를 복사하십시오 : function moveend (obj) {
lytxt1.focus ();
var r = document.selection.createrange ();
// 여기에서 현재 커서에서 이동하기 시작하기 때문에 (텍스트 상자가 0에서 시작되는 것 같습니다), 현재 커서 위치를 가져 와서 이동할 비트 수를 계산하여 커서를 원하는 위치로 이동할 수 있도록해야합니다.
r.movestart ( '문자', lytxt1.innertext.length- 커서);
R.Collapse (True);
r.select ();
}
위의 내용을 통해 우리는 div의 커서를 끝까지 움직일 수 있습니다.
완전한 예
다음과 같이 코드를 복사하십시오
<div contenteditable = "true"style = "높이 : 50px; 테두리 : 2px Solid Red;" id = "테스트"> </div>
함수 INSERTHTMLATCARET (html) {
var sel, 범위;
if (window.getSelection) {
// IE9 및 NONIE
sel = window.getSelection ();
if (sel.getRangeat && sel.rangecount) {
범위 = sel.getRangeat (0);
range.deletecontents ();
// Range.CreateContextualFragment ()는 여기에서 유용하지만 그렇습니다
// 비표준 및 모든 브라우저에서 지원되지 않음 (IE9, One)
var el = document.createelement ( "div");
el.innerhtml = html;
var fragment = document.createdOcumentFragment (), 노드, 마지막 노드;
while ((node = el.firstchild)) {
lastnode = fragment.appendChild (노드);
}
range.insertnode (조각);
// 선택을 보존하십시오
if (lastnode) {
범위 = Range.Clonerange ();
range.setStartAfter (lastNode);
Range.collapse (true);
sel.removeallranges ();
sel.addrange (범위);
}
}
} else if (document.Selection && document.Selection.Type! = "Control") {
// 즉 <9
document.selection.createrange (). PasteHtml (html);
}
}
jQuery를 기반으로 한 또 다른 예
코드를 다음과 같이 복사하십시오.
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta content = "text/html; charset = utf-8"http-equiv = "content-type">
<script type = "text/javaScript"src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>
<title> 내용 부호 </title>
<스타일>
*{
여백 : 0; 패딩 : 0;
}
.im-message-area {
너비 : 98%;
패딩 : 2px;
높이 : 75px;
국경 :#000 SOLID 1PX;
배경 : #fff;
글꼴 : 12px/20px Arial, "5B8B4F53";
Word-Wrap : 브레이크 워드;
오버플로 -Y : 자동;
선-높이 : 1;
}
.ul {display : none;}
.ul li {
배경색 : #CCC;
너비 : 50px;
}
</스타일>
<script language = "javaScript"type = "text/javaScript">
함수 inimage (텍스트) {
var obj = $ ( ". im-message-area") [0];
var 범위, 노드;
if (! obj.hasfocus) {
obj.focus ();
}
if (window.getSelection && window.getSelection (). getRangeat) {
범위 = window.getSelection (). getRangeat (0);
Range.collapse (False);
node = Range.CreateContextualFragment (텍스트);
var c = node.lastChild;
range.insertnode (노드);
if (c) {
Range.SetEndAfter (C);
Range.SetStartAfter (C)
}
var j = window.getSelection ();
j.removeallranges ();
J.Addrange (범위);
} else if (document.selection && document.selection.createrange) {
document.selection.createrange (). PasteHtml (텍스트);
}
}
$ (document) .ready (function () {
$ ( '#button'). 클릭 (function () {
$ ( '. ul'). show ();
})
$ ( '. ul li'). 각 (function () {
$ (this) .click (function () {
inimage ($ (this) .text ());
})
})
});
</스크립트>
</head>
<body>
<div contenteditable = "true"id = "im_message_area"> <br> </div>
<a href = "javaScript : void (0)"id = "버튼"> 버튼 </a>
<ul>
<li> (웃음) </li>
<li> (Cry) </li>
<li> (安) </li>
</ul>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.