editores de texto enriquecido javascript

Question

Hay varios (muy buenos) editores web de texto enriquecido escritos en Javascript (por ejemplo, FCKeditor, YUI Texteditor y muchos otros).

Sin embargo, no pude encontrar ningún tutorial sobre cómo construir dicho componente. Algo que explicaría las consideraciones de alto nivel (arquitectura) y / o más detalles en bajo nivel "crítico". puntos (es decir, por qué la mayoría de los editores utilizan iFrame, cómo maneja la entrada del teclado como Ctrl-B, Ctrl-C cuando se selecciona el texto y cuando no lo es, etc.)

Mi principal motivación es la curiosidad; Si tuviera que desarrollar un editor de este tipo hoy, no sabría por dónde empezar.

¿Alguien sabe de algún tutorial que cubra los problemas anteriores (idealmente, algo que explique cómo construir un editor wysiwyg desde cero)?

Answer 1

Después de más investigación encontré lo siguiente. La funcionalidad para crear un editor de texto enriquecido ya está implementada en el navegador. IE fue el primero en crear una API de este tipo y Firefox la replicó.

Descripción general

El punto principal es que el objeto javascript "documento" tiene una propiedad llamada designMode que se puede establecer en " on " ;. Esto convierte toda la página a un componente similar a un área de texto. Imagine que el navegador abre la página de la misma manera que lo haría MS-Word: el usuario puede ver el formato pero también puede escribir la página (normalmente el navegador abre una página como de solo lectura).

window.document.designMode = "On";

Debido a que lo anterior afecta a toda la página web, la mayoría de los editores usan iFrames para que el área editable sea solo el iFrame que tiene su propio objeto de documento.

Además de eso, hay una API que permite un fácil acceso de JavaScript al estilo. Esto se expone mediante el método execCommand (). Por ejemplo, puede llamar desde Javascript

document.execCommand('bold', false, '');

y el texto seleccionado se pondrá en negrita.

Tutoriales

He encontrado lo siguiente:

Un breve paso a paso guía .

Una guía de mozilla. Tiene la referencia API más conveniente que he encontrado y también algunos enlaces más.

Una guía de microsoft .

Answer 2

Usa tu curiosidad para motivarte a abrir el código fuente en tu editor favorito y comenzar a explorar. Dado que estos editores están escritos en JavaScript, las respuestas son gratuitas para el usuario.

Me doy cuenta de que estás buscando algo más fácil de digerir, pero leer el código fuente puede ser muy gratificante.

Comenzar a construir un editor podría ser tan simple como tomar un editor de código abierto existente y modificarlo para satisfacer sus propias necesidades especiales.