Cómo desarrollar un editor HTML
1. Agregar un iframe editable
El primer paso para implementar un editor HTML es colocar un iframe editable en la página web para ingresar texto. El método para hacer que un iframe sea editable es muy simple, simplemente active el modo de diseño del iframe. Los pasos específicos son los siguientes:
var editor = document.getElementById("IFRAME's ID");
var editorDoc = editor.contentWindow.document;
var editorWindow = editor.editor.contentWindow;
editorDoc.designMode = "on";
editorDoc .open();
editorDoc.write("
<./head>");editorDoc.close();
2. Establecer el estilo del texto seleccionado
Para establecer el estilo del texto seleccionado, documento .execCommand se utiliza La forma más sencilla. execCommand, pero la función de execCommand es relativamente limitada y, a veces, no puede satisfacer las necesidades. Por ejemplo: el tamaño de fuente establecido por execCommand solo puede ser de 1 a 7, no se puede usar el tamaño de píxeles y se llama si hace clic en el botón de la barra de herramientas. Además, si hace clic en la barra de herramientas Si se hace clic en otro DIV mientras el botón llama a execCommand, el contenido seleccionado en el iframe desaparecerá y la llamada a execCommand no será válida. Por lo tanto, este artículo presentará otro método, cuya idea básica es la siguiente:
(1) Obtener el HTML seleccionado
(2) Modificar el estilo del HTML; ;
(3) Reemplazar el HTML seleccionado con el HTML modificado.
2.1 Obtener el HTML seleccionado
El método para obtener el HTML seleccionado es diferente en diferentes navegadores. HTML en diferentes navegadores es diferente. En IE, puede usar
var range = document.selection.createRange()
En los navegadores Firefox y Chrome, puede usar var range = window. .getSelection().getRangeAt(0);
2.2 Reemplazar HTML seleccionado
Después de obtener el objeto seleccionado a través del método en 2.1, puede llamar a su método para reemplazar el HTML seleccionado. El método para reemplazar el HTML seleccionado varía según el navegador. En IE, solo necesita llamar a range.pasteHTML, mientras que en los navegadores Firefox y Chrome, puede usar range.deleteContents y range.insertNode para lograr esta operación
2.3 Encapsular un par de clases seleccionadas para operaciones HTML
Dado que los métodos de los objetos de rango obtenidos en 2.1 son muy diferentes en diferentes navegadores, para facilitar la implementación de las dos operaciones mencionadas en 2.1 y 2.2, encapsulamos un Class SelectionRange que opera en HTML seleccionado.
Esta clase tiene dos métodos, GetSelectedHtml y Reemplazar, que se utilizan para obtener HTML y reemplazar HTML respectivamente.
El código es el siguiente:
// Se utiliza para registrar el tipo de navegador
var browser = {};
var ua = navigator.userAgent.toLowerCase() ;
navegador.msie = (/msie ([\d.]+)/).test(ua);
navegador.firefox = (/firefox\/([\ d ]+)/).test(ua);
browser.chrome = (/chrome\/([\d. ]+)/).test(ua);
/Obtener HTML para múltiples nodos
función GetInnerHTML(nodos)
{
var builder = [];
for ( var i = 0; i < nodos.textContent) builder.push( nodos[i].textContent.replace(/\
else if (nodos[i].nodeValue) builder.push(nodos[i].nodeValue.replace(/\
}
}
return builder.join("");
}
función SelectionRange(doc, rango)
{
//Obtener el HTML del contenido seleccionado
this.GetSelectedHtml = function()
{
if (rango == null) return ""
if (browser.msie)
{
if (range.htmlText!= indefinido) rango de retorno. htmlText;
else return "";
}
else if (browser.firefox || browser.chrome)
{
devolver HTML
this.Replace = function(html)
{
if (range ! = null)
{
if (browser.msie)
{
if (range.pasteHTML ! = indefinido)
{
// El html seleccionado actualmente puede perderse por algún motivo (por ejemplo, se hace clic en otro div), vuelva a seleccionarlo
range.select();
range.pasteHTML(html);
Devuelve verdadero;
}
}
else if (browser.firefox || browser.chrome)
{
if (range.deleteContents != indefinido &&
rango.insertNode! = indefinido)
{
// Convertir texto html en objeto DOM
var temp = doc.createElement("DIV");
temp.innerHTML = html;
var elems = [];
for (var i = 0; i < temp.childNodes.length; i++)
{
elems.push(temp.childNodes[i]);
}
//eliminar los nodos seleccionados
range.deleteContents();
//Inserta los nodos correspondientes a html (es decir, todos los hijos de temp) uno por uno en el rango y elimínalos de temp
for (var i en elems)
{
temp.removeChild (elems[i]);
range.insertNode(elems[i]);
}
Devuelve verdadero;
}
}
}
Devuelve false;
}
}
}
Al mismo tiempo, también se implementa una función GetSelectionRange para obtener la selección actual. Objeto SelectionRange correspondiente al texto,
función GetSelectionRange(win)
{
var range = null;
if (browser. msie)
{
rango = win.document.selection.createRange();
if (range.parentElement().document != win.document )
{
range = null;
}
}
else if (browser.firefox | | navegador.chrome)
{
var sel = win.getSelection();
if (sel.rangeCount > 0) rango = sel.getRangeAt( 0); else rango = nulo;
}
devuelve nuevo rango de selección (win. documento, rango);
}
2.4 Modificar el estilo del HTML seleccionado
El método para modificar el estilo del HTML seleccionado no es complicado. Solo necesita convertir el HTML en un objeto DOM y luego establecer de forma recursiva el valor de estilo correspondiente a cada uno. node. El código específico es el siguiente: Disponible:
función SetNodeStyle(doc, nodo, nombre, valor)
{
if (node.innerHTML = = indefinido)
{
volver
n nodo;
}
else
{
nodo.estilo[nombre] = valor;
for (var i = 0; i < node.childNodes.length; i++)
{
var cn = node.childNodes[i];
if (node.innerHTML != indefinido)
{
SetNodeStyle(doc, cn, nombre, valor);
}
}
nodo de retorno;
}
}
función SetStyle(doc, html, nombre, valor)
{
var dom = doc.createElement("DIV");
dom.innerHTML = html;
for (var i = 0; i < dom.createElement("SPAN");
span.style[nombre] = valor;
if (node.nodeValue! = indefinido) span.innerHTML = node.nodeValue.replace (/\
else if (node.textContent ! = indefinido) span.innetHTML = node.textContent.replace(/\
//Reemplazar nodo de texto
dom.replaceChild( span, node);
}
else
{
SetNodeStyle(doc, nodo, nombre, valor);
}
}
return dom.innerHTML;
}
2.
2.5 Ejemplo
Utilizando el código anterior, es muy fácil implementar un editor HTML. Por ejemplo, el siguiente código establece el tamaño de fuente del texto seleccionado en 32px:
var range. = GetSelectionRange (editorWindow);
var html = SetStyle(editorDoc, range.GetSelectedHtml(), "fontSize", "32px");
range.Replace(html);
De manera similar, también puede establecer el interlineado, sangrar, insertar imágenes, etc.
3. Resumen
El código proporcionado en este artículo es compatible con los navegadores IE, Firefox y Chrome. Si tiene otras preguntas, puede contactarme por correo electrónico o WebIM.