Estoy tratando de desarrollar un editor en línea (como FCKEditor/etc) pero no tengo idea de cómo funcionan. Sé que los WYSIWYG tienen Javascript e IFrames, pero ¿cómo funcionan realmente?¿Cómo funcionan los editores de texto en línea?
Tengo especial curiosidad por tener una vista previa en tiempo real de lo que se está escribiendo en el editor.
RTE generalmente se implementan (¿siempre?) utilizando un iframe. El objeto de documento que está disponible dentro de ese iframe debe tener la propiedad designMode set to on. Después de este punto, todo lo que tiene que hacer para implementar funcionalidades básicas como negrita, cursiva, color, fondo, etc., se hace usando el método execCommand del objeto del documento.
La razón principal para usar un iframe es que no perderá el foco de la selección al hacer clic en los botones de estilo (Firefox permite establecer esta propiedad solo en iframes). Además, el atributo contentEditable no está disponible en las versiones de Firefox anteriores a 3.
Las cosas se vuelven un poco más complicadas cuando quieres hacer cosas elegantes con esa RTE. En ese punto, debe usar Range objects (que se implementan de manera diferente en los distintos navegadores).
El sitio web de mozilla muestra todo el camino ... ¡muchas gracias! pd: arregla los enlaces, están un poco mal –
Me alegro de poder ayudar y gracias por señalar los problemas del enlace. –
(por ejemplo:. Ah, no es una frontera, menos de entrada de texto, que se sincronizan con la parte realmente mostrando Así que para poner la letra en rojo que acaba de cambiar el estilo) y etc ..
así es como se hace.
es de código abierto y el código fuente está disponible gratuitamente.
El código para utilizar en the editor Stackoverflow is also available
Podría valer la pena gastar algo de la lectura a través del código fuente de tiempo. La gente aquí estaría feliz de ayudar a explicar cualquier fragmento de código que no estuviera claro.
Creo que la clave para los editores WYSIWYG es el atributo contenteditable (que se puede aplicar a cualquier etiqueta HTML, pero presumiblemente algo así como un div en este caso). El resto de la funcionalidad la proporciona Javascript al acceder al DOM y manipular el HTML. Con respecto a la función de vista previa, esto es probablemente solo una cuestión de enganchar el evento que se produce cuando el elemento es editado por el usuario y luego buscar su HTML y mostrarlo en otro lugar en la página usando un Javascript relativamente sencillo.
Ya, la mayoría de las funcionalidades proporcionadas, como Bold, Italic, etc. se ejecutan a través de la función execCommand(): http://www.quirksmode.org/dom/execCommand.html – cheeaun
Actualización:Si sólo necesita un editor, le sugiero que utilice cualquiera de las otras sugerencias de personas que aquí han dado. Pero si tiene algún propósito académico para construir esto, lo siguiente será un trampolín.
Esto se logra con bastante facilidad (algunas partes). Por ejemplo, puede usar jQuery para comenzar a funcionar realmente rápido.
div.theScreen {
width:320px;
height:75px;
border:1px solid #CCCCCC;
background-color:#f1f1f1;
}
<div class="theScreen"></div>
<div><textarea class="typePad"></textarea></div>
Ahora que tenemos marcado y estilos en su lugar, podemos agregar un simple Javascript para activar las vistas previas en tiempo real.
$(document).ready(function(){
$(".typePad").keyup(function(){
$(".theScreen").html($(".typePad").val());
});
});
Este es un ejemplo muy crudo y simple, pero lo ayudará a comenzar.
en realidad esto no funcionará porque la pantalla y texteditor debe ser el mismo –
Jose, no mencionó la pantalla y el editor debe compartir una pantalla en su publicación original. – Sampson
Comencé un proyecto de código abierto "sourceforge" para hacer un editor de texto enriquecido hace aproximadamente un año y medio. Nunca me di cuenta de cómo obtener mi código allí, sin embargo para desarrollarlo tuve que investigar cómo funciona el "modo editable de contenido" en IE y Firefox. Mi investigación incluyó principalmente el sitio web de firefox y el sitio web de microsoft.
El código que vi para hacer esto era feo y poco amigable con OO (lo siento, no soy un fanático de los objetos), así que tuve que volver a factorizar mucho para obtener un formulario que Podría desarrollar y extenderme.
Desafortunadamente, incluso si sigue la funcionalidad proporcionada por el "modo de edición de contenido" del navegador, seguirá teniendo un editor lleno de errores.La razón de esto es que el "modo editable de contenido" no funciona de manera consistente con pegar desde MS Word (todo el mundo lo prueba) o crear listas numeradas, y la marca que genera será inconsistente y mal formada.
Es por eso que ahora uso TinyMCE. TinyMCE está lleno de decisiones de diseño que yo personalmente habría evitado, pero han solucionado la mayoría de los errores que obtendrás al tratar de crear tu propio editor. También está lleno de características que le permitirán personalizarlo según sus necesidades.
No puedo recomendar nada más porque realmente no he probado las alternativas.
Aunque TinyMCE parece ser la mejor opción, para mí todavía es un dolor de cabeza porque pegar documentos de Word sigue siendo impredecible, la promesa WYSIWYG no es realmente posible en HTML pero el cliente lo espera, y hay muchos problemas que se arrastran una vez que comienzas a dejar que los usuarios pongan HTML sin procesar en tu base de datos. (especialmente cuando su código base ha sido actualizado por última vez en 1993 ...)
Espero no haber perdido el espíritu de su pregunta con mis ediciones, pero creo que la última parte fue un poco confusa. –
¡Gran marca! A veces no soy bueno para expresarme. –