javascript - rich - tinymce

¿Cómo funcionan los editores de texto enriquecido en línea?

Question

Me preguntaba cómo los editores de texto enriquecido en línea mantienen el formato al pegar texto de una página web o documento. Un cuadro de área de texto estándar solo toma texto mientras que estos editores WYSIWYG parecen usar un DIV. ¿Como funciona?

Answer 1

Los editores WYSIWYG en realidad se basan en la funcionalidad básica de edición de HTML que los navegadores ya han incorporado. En Firefox, la tecnología se llama Midas . En IE, contentEditable .

Answer 2

Los editores de texto enriquecido en línea utilizan contentEditable o designMode para aprovechar el soporte nativo del navegador para la edición de HTML. Cuando pega en un elemento contentEditable o designMode, el navegador coloca HTML directamente en el elemento. Pruébelo usted mismo pegándolo en la Demo de Midas y luego usando el elemento de inspección de Firebug para ver el HTML que ha pegado.

Las aplicaciones JavaScript pueden usar el método execCommand para formatear la selección del usuario en un editor de texto enriquecido.

Answer 3

Mediante el uso de las capacidades del navegador existente (IE - ContentEditable). Esto permite al desarrollador permitir que el usuario edite html directamente. Por lo general, utilizan un iFrame para separar la sección editable del resto de la página, pero esto no es obligatorio.

Luego, el desarrollador puede simplemente leer la fuente html del iframe (o lo que sea) y listo.