Detaillierte Einführung in die Methode zum Einfügen und Hinzufügen von Textbeschriftungsknoten am Cursor in JavaScript

In diesem Artikel wird hauptsächlich die detaillierte Methode zum Einfügen und Hinzufügen von Textbeschriftungsknoten am Cursor in JavaScript vorgestellt. Hat einen sehr guten Referenzwert. Werfen wir einen Blick mit dem Editor unten

Die richtige Methode besteht darin, das Selection-Objekt und das Range-Objekt korrekt zu verwenden, um Text oder Knoten an der aktuellen Position des Cursors einzufügen. Allerdings unterscheiden sich die Anwendungsmethoden dieser beiden Objekte im IE und in den Standard-DOM-Methoden.

Idee: Erhalten Sie zunächst die Auswahl des Benutzers (die aktuelle Position des Cursors kann als Auswahl mit derselben Start- und Endposition verstanden werden). Konvertieren Sie dann das Selection-Objekt in ein Range-Objekt. Der Zweck besteht darin, die Methoden des Range-Objekts zum Einfügen von Inhalten zu verwenden. Nachdem der Einfügevorgang abgeschlossen ist, bewegen Sie schließlich den Cursor hinter den eingefügten Inhalt.

var sel = win.document.selection; //IE 
var sel = win.getSelection(); //DOM 
var range = sel.createRange(); // IE下 
var range = sel.getRangeAt(0); // DOM下 
if(range.startContainer){ // DOM下 
 sel.removeAllRanges(); // 删除Selection中的所有Range 
 range.deleteContents(); // 清除Range中的内容 
 // 获得Range中的第一个html结点 
 var container = range.startContainer; 
 // 获得Range起点的位移 
 var pos = range.startOffset; 
 // 建一个空Range 
 range = document.createRange(); 
 // 插入内容 
 var cons = win.document.createTextNode(",:),"); 
 if(container.nodeType == 3){// 如是一个TextNode 
 container.insertData(pos, cons.nodeValue); 
 // 改变光标位置 
 range.setEnd(container, pos + cons.nodeValue.length); 
 range.setStart(container, pos + cons.nodeValue.length); 
 }else{// 如果是一个HTML Node 
 var afternode = container.childNodes[pos]; 
 container.insertBefore(cons, afternode); 
 range.setEnd(cons, cons.nodeValue.length); 
 range.setStart(cons, cons.nodeValue.length); 
 } 
 sel.addRange(range); 
}else{// IE下 
 var cnode = range.parentElement(); 
 while(cnode.tagName.toLowerCase() != “body”){ 
 cnodecnode = cnode.parentNode; 
 } 
 if(cnode.id && cnode.id==”rich_txt_editor”){ 
 range.pasteHTML(",:),"); 
 } 
} 
win.focus();

Der Unterschied zwischen innerHTML und pasteHTML

innerHTML ist ein Attribut, Sie können den HTML-Inhalt in diesem Element abrufen oder festlegen und ihn für jedes Element verwenden, das untergeordnete HTML-Knoten enthalten kann

pasteHTML() ist eine Methode, Ersetzen Sie den Text oder HTML im angegebenen Textbereich. Diese Methode muss auf einen Bereich angewendet werden, der von createTextRange() oder document.selection.createRange()

var oRange = document.selection.createRange(); 
 if(oRange.text!=''){ 
 var oHtml = &#39;<a href="#" rel="external nofollow" target=_blank>oRange.text</a>&#39;; 
 oRange.pasteHTML(oHtml); 
 }

erstellt wurde

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Methode zum Einfügen und Hinzufügen von Textbeschriftungsknoten am Cursor in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!