texto ejemplos javascript html rich-text-editor

ejemplos - editor de texto en javascript



Cómo crear un editor de texto enriquecido (2)

Hola, todos quiero saber cuál es el concepto detrás de la creación del editor de texto enriquecido. me refiero a cómo crear un editor de texto enriquecido. Quiero aprender la implementación.

PD: por favor, no sugiera usar YUI o cualquier otra biblioteca incorporada. Quiero hacer uno mío.

Entonces, ¿cuál es el concepto detrás?

Gracias :)


La forma más fácil es la siguiente. Es utilizado por TinyMCE y CKEditor y muchos otros. Hay muchas variaciones: en particular, si está creando un editor de código, hay trucos ingeniosos que puede hacer usando textareas y una fuente monoespaciada.

  • Cree dinámicamente un iframe y coloque el contenido editable dentro del documento de ese iframe
  • Establezca el iframe para que sea editable configurando la propiedad designMode su documento en "on" o estableciendo la propiedad contentEditable de su elemento <body> en true. Tenga en cuenta que el soporte de designMode es anterior a contenteditable en Firefox y, en consecuencia, es mucho menos problemático.
  • Agregue botones (como negrita, cursiva, insertar imagen, etc.) en algún lugar sensato (como, por ejemplo, directamente encima del iframe editable) en el documento principal que actúa sobre el contenido seleccionado dentro del iframe. Todos los navegadores suministran un método execCommand() (consulte MSDN y MDN , por ejemplo) para realizar muchas de estas acciones, aunque existe alguna variación en cómo funcionan exactamente y qué margen de beneficio generan.

Eso es lo básico de cómo funciona. Hay muchas otras cosas complicadas que la mayoría de los editores hacen y que no son inmediatamente obvias, en parte para eliminar las muchas diferencias entre los navegadores y en parte para proporcionar funcionalidades adicionales que no están cubiertas por los comandos integrados del navegador. Es algo muy complicado y difícil de hacer bien, requiere un alto grado de experiencia y compromiso, y no es algo que deba tomarse a la ligera.


No sugeriré que mire a otros para usarlos, pero le sugiero que consulte jWYSIWYG para ver cómo está codificado en jQuery.