In diesem Artikel wird die Methode zur Implementierung von JS beschrieben, um Inhalte in einen bestimmten Ort in einem bearbeitbaren Div einzulegen. Genau wie der Editor, den wir verwenden, teilen wir es Ihnen als Referenz mit Ihnen. Die spezifische Implementierungsmethode lautet wie folgt:
Lassen Sie Div zuerst den Bearbeitungsmodus aktivieren
Kopieren Sie den Code -Code wie folgt: <div inhaltlich = true id = "divest"> </div>
Schalten Sie den Bearbeitungsmodus des DIV ein, indem Sie inhaltsbedingt = true festlegen. Auf diese Weise kann der DIV Inhalte wie das Textfeld eingeben.
Kein gesprächiger. Hier erfahren Sie, wie Sie die Cursorposition erhalten oder festlegen.
2 Schritte:
① Holen Sie sich die Cursorposition im Div
② Ändern Sie die Cursorposition
Kopieren Sie den Code wie folgt: var cursor = 0; // Cursorposition
document.onsectionChange = function () {
var range = document.Selection.createrange ();
var srcele = Bereich.ParentElement (); // Erhalten Sie das aktuelle Element
var copy = document.body.createTextrange ();
Copy.MovetoelementText (SRCELE);
für (cursor = 0; copy.comPareendpoints ("StartTostart", Bereich) <0; Cursor ++) {
Copy.MovESTART ("Zeichen", 1); // Ändern Sie die Cursorposition, tatsächlich erfassen wir die Anzahl der Cursoren.
}
}
Binden Sie das Cursor -Änderungsereignis an das Dokument. Wird verwendet, um die Cursorposition aufzuzeichnen.
Auf diese Weise können Sie die Cursorposition der Div erhalten.
Kopieren Sie den Code wie folgt: Funktion Moveend (OBJ) {
lytxt1.focus ();
var r = document.Selection.createrange ();
// Da es sich hier vom aktuellen Cursor bewegt (es scheint, dass das Textfeld von 0 beginnt), müssen wir die aktuelle Cursorposition erhalten und dann berechnen, wie viele Bits zu bewegen sind, damit der Cursor in die gewünschte Position verschoben werden kann.
R.Movestart ('Charakter', lytxt1.inNertext.length - Cursor);
R.Collapse (wahr);
r.Select ();
}
Durch das obige können wir den Cursor im Div bis zum Ende bewegen
Ein vollständiges Beispiel
Kopieren Sie den Code wie folgt: <Schaltfläche type = "button" onclick = "document.getElementById ('Test'). Focus (); InserthtmlatCaret ('<b> eingefügt </b>');"> Zeichen einfügen </button>
<div intdlichung = "True" style = "Height: 50px; Rand: 2px solide rot;" id = "test"> </div>
Funktion InserthtmlatCaret (html) {
var sel, Bereich;
if (window.getSelection) {
// IE9 und Nicht-ie
sel = window.getSelection ();
if (sel.getrangeat && sel.rangecount) {
Bereich = sel.getRangeat (0);
Bereich.DeletteContents ();
// range.createContextualfragment () wäre hier nützlich, aber ist
// nicht standardmäßig und in allen Browsern nicht unterstützt (dh 9, zum einen)
var el = document.createelement ("div");
el.innerhtml = html;
var fragment = document.createcedocumentfragment (), Knoten, Nachnode;
while ((node = el.Firstchild)) {
Nachnode = Fragment.AppendChild (Knoten);
}
Bereich.insertNode (Frag);
// die Auswahl bewahren
if (lastnode) {
Bereich = Bereich.ClonRerange ();
Range.SetStartAfter (Nachnode);
Range.Collapse (wahr);
sel.removeallranges ();
Sel.Addrange (Bereich);
}
}
} else if (document.selection && document.selection.type! = "control") {
// dh <9
document.Selection.Createrange (). Pastehtml (HTML);
}
}
Ein weiteres Beispiel basierend auf JQuery
Kopieren Sie den Code wie folgt: <! 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">
<kopf>
<meta content = "text/html; charset = utf-8" http-äquiv = "content-type">
<script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>
<title> Inhaltsberechtigt </title>
<Styles>
*{{
Rand: 0; Polsterung: 0;
}
.Im-message-Bereich {
Breite: 98%;
Polsterung: 2px;
Höhe: 75px;
Grenze:#000 Solid 1px;
Hintergrund: #fff;
Schriftart: 12px/20px Arial, "5B8B4F53";
WORT-WRAP: Breakwort;
Überlauf-y: Auto;
Linienhöhe: 1;
}
.ul {display: keine;}
.ul li {
Hintergrundfarbe: #CCC;
Breite: 50px;
}
</style>
<script Language = "JavaScript" type = "text/javaScript">
Funktionsinvention (Text) {
var obj = $ (". IM-Message-Gebiet") [0];
VAR -Bereich, Knoten;
if (! obj.hasfocus) {
obj.focus ();
}
if (window.getSelection && window.getSelection (). getRangeat) {
range = window.getSelection (). getRangeat (0);
Bereich.Collapse (falsch);
node = range.createContextualfragment (Text);
var c = node.lastchild;
Bereich.insertNode (Knoten);
if (c) {
Bereich.SetendAfter (c);
Bereich.SetStartAfter (c)
}
var j = window.getSelection ();
j.removeallranges ();
J.Addrange (Bereich);
} else if (document.Selection && document.Selection.Createrange) {
document.Selection.Createrange (). PastEthtml (Text);
}
}
$ (Dokument) .Ready (function () {
$ ('#button'). click (function () {
$ ('. ul'). show ();
})
$ ('. ul li'). Jede (Funktion () {
$ (this) .click (function () {
Infizage ($ (this) .Text ());
})
})
});
</script>
</head>
<body>
<div inthededable = "true" id = "im_message_area"> <br> </div>
<a href = "javaScript: void (0)" id = "button"> button </a>
<ul>
<li> (lacht) </li>
<li> (Cry) </li>
<li> (安) </li>
</ul>
</body>
</html>
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.