Red de conocimiento informático - Material del sitio web - Cómo desarrollar un editor HTML

Cómo desarrollar un editor HTML

El método de desarrollo es el siguiente:

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.