Este artículo describe el método de implementación de JS para insertar contenido en una ubicación especificada en un div. Al igual que el editor que usamos, lo compartimos con usted para su referencia. El método de implementación específico es el siguiente:
Primero, deje que Div habilite el modo de edición
Copie el código del código de la siguiente manera: <divtenteditable = true id = "divtest"> </div>
Encienda el modo de edición del DIV estableciendo contento = true. De esta manera, el DIV puede ingresar contenido como el cuadro de texto.
No más hablador. Aquí es cómo obtener o establecer la posición del cursor.
2 pasos:
① Obtenga la posición del cursor en el Div
② Cambie la posición del cursor
Copie el código de la siguiente manera: var cursor = 0; // Posición del cursor
document.onsectionChange = function () {
var range = document.selection.CreaterGe ();
var srcele = range.ParentElement (); // Obtener el elemento actual
var copy = document.body.createTextrange ();
copy.movetoElementText (srcele);
for (cursor = 0; copy.compeEndPoints ("startTostart", range) <0; cursor ++) {
copy.movestart ("carácter", 1); // Cambiar la posición del cursor, de hecho, estamos registrando el número de cursores.
}
}
Ate el evento de cambio de cursor al documento. Se utiliza para registrar la posición del cursor.
De esta manera, puede obtener la posición del cursor del Div.
Copie el código de la siguiente manera: Función Moveend (OBJ) {
lytxt1.focus ();
var r = document.selection.CreaterGe ();
// Debido a que aquí comienza a moverse desde el cursor actual (parece que el cuadro de texto comienza desde 0.), necesitamos obtener la posición actual del cursor y luego calcular cuántos bits moverse, para que el cursor se pueda mover a la posición deseada.
r.movestart ('carácter', lytxt1.inntext.length - cursor);
R.Collapse (verdadero);
r.select ();
}
A través de lo anterior podemos mover el cursor en el Div hasta el final
Un ejemplo completo
Copie el código de la siguiente manera: <button type = "button" onClick = "document.getElementById ('test'). Focus (); inserthtmlatcaret ('<b> insertado </b>');"> Insertar caracteres </boton>
<divtenteditable = "true" style = "altura: 50px; borde: 2px sólido rojo;" id = "Test"> </div>
función inserthtmlatcaret (html) {
var sel, rango;
if (window.getSelection) {
// IE9 y no II
sel = window.getSelection ();
if (sel.getRangeat && sel.rangecount) {
rango = sel.getRanGeat (0);
range.deletecontents ();
// range.createContextualFragment () sería útil aquí pero es
// no estándar y no es compatible con todos los navegadores (es decir, para uno)
var el = document.createElement ("div");
el.innerhtml = html;
var fragment = document.createDocumentFragment (), nodo, dastNode;
while ((node = el.firstchild)) {
dastNode = fragment.appendChild (nodo);
}
range.insertNode (frag);
// preservar la selección
if (lastNode) {
range = range.clonerange ();
Range.setStartAfter (LastNode);
range.ocollapse (verdadero);
sel.removeallranges ();
Sel.Addrange (rango);
}
}
} else if (document.selection && document.selection.type! = "control") {
// es decir <9
document.Selection.CreaterGeA (). Pastehtml (html);
}
}
Otro ejemplo basado en jQuery
Copie el código de la siguiente manera: <! 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">
<Evista>
<meta content = "text/html; charset = utf-8" http-oquiv = "content-type">
<script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>
<title> Contenteditable </title>
<estilo>
*{
margen: 0; relleno: 0;
}
.im-Message-área {
Ancho: 98%;
relleno: 2px;
Altura: 75px;
borde:#000 sólido 1px;
Antecedentes: #fff;
fuente: 12px/20px Arial, "5B8B4F53";
Word-Wrap: Break-Word;
Overflow-y: Auto;
Línea de altura: 1;
}
.ul {display: none;}
.ul li {
Color de fondo: #CCC;
Ancho: 50px;
}
</style>
<script language = "javaScript" type = "text/javaScript">
function inimage (texto) {
var obj = $ (". IM-Message-área") [0];
rango var, nodo;
if (! obj.hasfocus) {
obj.focus ();
}
if (window.getSelection && window.getSelection (). GetRanGeat) {
range = window.getSelection (). GetRanGeat (0);
range.ocollapse (falso);
nodo = range.createContextualFragment (texto);
var c = node.lastchild;
range.insertNode (nodo);
if (c) {
Range.SetendaFter (C);
range.setStartAfter (c)
}
var j = window.getSelection ();
J.RemoveAllranges ();
J.Addrange (rango);
} else if (document.selection && document.selection.createrange) {
document.Selection.CreaterGeA (). Pastehtml (texto);
}
}
$ (documento) .Ready (function () {
$ ('##botón'). Click (function () {
$ ('. ul'). show ();
})
$ ('. Ul li'). Cada (function () {
$ (this) .click (function () {
Inimage ($ (this) .Text ());
})
})
});
</script>
</ablo>
<Body>
<divtenteditable = "true" id = "im_message_area"> <br> </div>
<a href = "javascript: void (0)" id = "botón"> botón </a>
<ul>
<li> (risas) </li>
<li> (llorar) </li>
<li> (安) </li>
</ul>
</body>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.