probar - editores de texto enriquecido de JavaScript
probar codigo html online (2)
Use su curiosidad para motivarlo a abrir el código fuente en su editor favorito y comenzar a explorar. Como estos editores están escritos en JavaScript, las respuestas son gratuitas.
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.
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 explique las consideraciones de alto nivel (arquitectura) y / o más detalles en puntos "críticos" de bajo nivel (es decir, ¿por qué la mayoría de los editores utilizan iFrame, cómo manejas la entrada del teclado como Ctrl-B, Ctrl? -C cuando se selecciona el texto y cuando no es, etc.)
Mi principal motivación es la curiosidad; si hoy tuviera que desarrollar un editor así, no sabría por dónde empezar.
¿Alguien sabe de algún tutorial que cubra los temas anteriores (idealmente, algo que explique cómo construir un editor wysiwyg desde cero)?
Después de más investigaciones encontré lo siguiente. La funcionalidad para construir un editor de texto enriquecido ya está implementada en el navegador. IE fue el primero en crear dicha API y Firefox la replicó.
Visión de conjunto
El punto principal es que el objeto de JavaScript "documento" tiene una propiedad llamada designMode que se puede establecer en "on". Esto convierte toda la página en un componente similar a un área de texto. Imagínese 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 ingresar la página (normalmente el navegador abre una página de solo lectura).
window.document.designMode = "On";
Como 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 está expuesto arroja el método execCommand (). Por ejemplo, puede llamar desde Javascript
document.execCommand(''bold'', false, '''');
y el texto seleccionado se convertirá en negrita.
Tutoriales
He encontrado lo siguiente:
Una breve guía paso a paso.
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 .