Maison >interface Web >js tutoriel >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 = '<a href="#" rel="external nofollow" target=_blank>oRange.text</a>'; 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!