Introduction détaillée à la méthode d'insertion et d'ajout de nœuds d'étiquette de texte au niveau du curseur en JavaScript

Cet article présente principalement la méthode détaillée d'insertion et d'ajout de nœuds d'étiquette de texte au niveau du curseur en JavaScript. A une très bonne valeur de référence. Jetons un coup d'œil avec l'éditeur ci-dessous

La méthode correcte consiste à utiliser correctement l'objet Selection et l'objet Range pour insérer du texte ou des nœuds à la position actuelle du curseur. Cependant, les méthodes d'application de ces deux objets dans les méthodes IE et DOM standard sont différentes.

Idée : Obtenez d'abord la sélection de l'utilisateur (la position actuelle du curseur peut être comprise comme une sélection avec les mêmes positions de début et de fin). Ensuite, convertissez l’objet Selection en un objet Range. Le but est d'utiliser les méthodes de l'objet Range pour insérer du contenu. Enfin, une fois l'action d'insertion terminée, déplacez le curseur derrière le contenu inséré.

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();

La différence entre innerHTML et pasteHTML

innerHTML est un attribut, Vous pouvez obtenir ou définir le contenu HTML de cet élément, et vous pouvez l'utiliser pour tout élément pouvant contenir des nœuds enfants HTML

pasteHTML() est une méthode, Remplacer le texte ou le HTML dans la zone de texte spécifiée. Cette méthode doit être appliquée à une zone créée par createTextRange() ou 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); 
 }

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!