Cet article décrit la méthode d'implémentation de JS pour insérer le contenu dans un emplacement spécifié dans une div modifiable. Tout comme l'éditeur que nous utilisons, nous le partageons avec vous pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
Tout d'abord, laissez Div activer le mode d'édition
Copiez le code de code comme suit: <div ContentEtable = true id = "divtest"> </div>
Allumez le mode d'édition du div en définissant ContentEdIT = true. De cette façon, le div peut entrer du contenu comme la zone de texte.
Plus de bavardage. Voici comment obtenir ou définir la position du curseur.
2 étapes:
① Obtenez la position du curseur dans le div
② Changez la position du curseur
Copiez le code comme suit: var curseur = 0; // Position du curseur
document.onselectionchange = function () {
var range = document.selection.creareange ();
var srcele = range.parerentelement (); // Obtenez l'élément actuel
var copy = document.body.createExtrange ();
copy.movetoelementText (srcele);
for (cursor = 0; copy.compareendpoints ("startTostart", gamme) <0; cursor ++) {
copy.movestart ("caractère", 1); // modifie la position du curseur, en fait, nous enregistrons le nombre de curseurs.
}
}
Lisez l'événement de changement de curseur au document. Utilisé pour enregistrer la position du curseur.
De cette façon, vous pouvez obtenir la position du curseur de la div.
Copiez le code comme suit: Fonction Movend (obj) {
lytxt1.focus ();
var r = document.selection.createrange ();
// Parce qu'ici, il commence à se déplacer du curseur actuel (il semble que la zone de texte commence à 0.), nous devons obtenir la position actuelle du curseur, puis calculer le nombre de bits à déplacer, afin que le curseur puisse être déplacé vers la position souhaitée.
R.Movestart ('Caractère', lytxt1.innertext.length - curseur);
R.Collapse (vrai);
R.Select ();
}
À travers ce qui précède, nous pouvons déplacer le curseur dans la div à la fin
Un exemple complet
Copiez le code comme suit: <bouton type = "bouton" onclick = "document.getElementById ('test'). Focus (); inserthtmlatcaret ('<b> inséré </b>');"> Insérer un caractère </frutch>
<div tentEdable = "true" style = "hauteur: 50px; bordure: 2px solide rouge;" id = "test"> </ div>
fonction inserthtmlatcaret (html) {
var sel, gamme;
if (window.getSelection) {
// ie9 et non ie
sel = window.getSelection ();
if (sel.getRangeat && sel.RangeCount) {
plage = sel.getRangeat (0);
range.deletetectents ();
// range.CreateContextualFragment () serait utile ici mais c'est
// Non standard et non pris en charge dans tous les navigateurs (IE9, pour un)
var el = document.CreateElement ("div");
el.innerhtml = html;
var fragment = document.CreateDocumentFragment (), nœud, lastNode;
while ((node = el.firstchild)) {
LastNode = fragment.ApendChild (nœud);
}
range.insertNode (frag);
// préserve la sélection
if (lastNode) {
plage = range.clonerange ();
range.setStartafter (LastNode);
plage.collapse (vrai);
sel.removeallRanges ();
sel.addrange (plage);
}
}
} else if (document.selection && document.selection.type! = "contrôle") {
// c'est-à-dire <9
Document.Selection.Createrange (). PasteHtml (HTML);
}
}
Un autre exemple basé sur jQuery
Copiez le code comme suit: <! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta content = "text / html; charset = utf-8" http-equiv = "contenu-type">
<script type = "text / javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </ script>
<Title> ContentEditable </TITME>
<style>
* {
marge: 0; rembourrage: 0;
}
.im-message-région {
Largeur: 98%;
rembourrage: 2px;
hauteur: 75px;
Border: # 000 solide 1px;
Contexte: #FFF;
Police: 12px / 20px Arial, "5b8b4f53";
Word-Wrap: Break-Word;
débordement-y: auto;
hauteur de ligne: 1;
}
.ul {affichage: aucun;}
.ul li {
Color d'arrière-plan: #ccc;
Largeur: 50px;
}
</ style>
<script lingots = "javascript" type = "text / javascript">
fonction inimage (texte) {
var obj = $ (". IM-Message-Area") [0];
Plage var, nœud;
if (! obj.hasfocus) {
obj.focus ();
}
if (window.getSelection && window.getSelection (). getRangeat) {
range = window.getSelection (). getRangeat (0);
range.collapse (false);
Node = range.CreateContextualFragment (texte);
var c = node.lastchild;
range.insertNode (nœud);
if (c) {
range.setendAfter (c);
plage.setstartafter (c)
}
var j = window.getSelection ();
J.RemoveallRanges ();
J.Addrange (gamme);
} else if (document.selection && document.selection.createrange) {
Document.Selection.Createrange (). PasteHtml (texte);
}
}
$ (document) .ready (function () {
$ ('# bouton'). Cliquez sur (fonction () {
$ ('. ul'). show ();
})
$ ('. ul li'). Chaque (fonction () {
$ (this) .click (function () {
inImage ($ (this) .text ());
})
})
});
</cript>
</ head>
<body>
<div tentEDitable = "true" id = "im_message_area"> <br> </div>
<a href = "javascript: void (0)" id = "bouton"> bouton </a>
<ul>
<li> (rires) </li>
<li> (Cry) </li>
<li> (安) </li>
</ul>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.