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

Question

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?

Tengo especial curiosidad por tener una vista previa en tiempo real de lo que se está escribiendo en el editor.

Answer 1

Los

RTE generalmente se implementan (¿siempre?) usando un iframe. El objeto de documento que está disponible dentro de ese iframe debe tener la propiedad designMode configurado en on . Después de este punto, todo lo que tiene que hacer para implementar funcionalidades básicas como negrita, cursiva, color, fondo, etc., se realiza utilizando 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 configurar 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 ese RTE. En ese momento, debe usar Objetos de rango (que se implementan de manera diferente en los distintos navegadores) .

Answer 2

FCKEditor es de código abierto y el código fuente está disponible gratuitamente.

El código para el editor utilizado en Stackoverflow también está disponible

Puede valer la pena pasar algún tiempo leyendo el código fuente. La gente aquí estará feliz de ayudar a explicar cualquier fragmento de código que no esté claro.

Answer 3

Creo que la clave para los editores WYSIWYG es el contenteditable atributo (que puede aplicarse a cualquier etiqueta HTML, pero presumiblemente algo así como un div en este caso). El resto de la funcionalidad generalmente es proporcionada por Javascript accediendo al DOM y manipulando el HTML. Con respecto a la función de vista previa, esto probablemente sea solo una cuestión de enganchar el evento que se genera cuando el usuario edita el elemento y luego buscar su HTML y mostrarlo en otra parte de la página usando un Javascript relativamente sencillo.

Answer 4

  

(ej .: ah, hay un texto de entrada sin bordes, que se sincroniza con la parte que se muestra realmente. Por lo tanto, para poner la letra en rojo simplemente cambian el estilo) y etc.

así es como se hace.

Answer 5

Actualización: Si solo necesita un editor, le sugiero que use cualquiera de las otras sugerencias que la gente aquí ha 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, podría 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 algunos Javascript simples 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.

Answer 6

Comencé un código abierto " sourceforge " proyecto para hacer un editor de texto enriquecido hace aproximadamente un año y medio. Nunca descubrí cómo poner mi código allí, sin embargo, para desarrollarlo tuve que investigar cómo & Quot; contenido editable mode & Quot; Funciona 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 no muy amigable para OO (lo siento, soy un objeto intolerante, no puedo evitarlo), por lo que me tomó mucho factorizar volver a tener una forma que yo podría desarrollarse y extenderse.

Desafortunadamente, incluso si sigue la funcionalidad proporcionada por el " modo editable de contenido " del navegador; aún terminarás con un editor lleno de errores. La razón de esto es que & Quot; modo editable de contenido & Quot; no funciona de forma coherente al pegar desde MS Word (todo el mundo intenta esto) o al crear listas numeradas, y el marcado que genera será inconsistente y estará mal formado.

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á cuando intente crear su 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.

Si bien TinyMCE parece ser la mejor opción, sigue siendo un dolor de cabeza para mí porque pegar documentos de Word todavía es impredecible, la promesa WYSIWYG no es realmente posible en HTML, pero el cliente lo espera, y hay muchos problemas que se acumulan una vez que comience a permitir que los usuarios pongan HTML sin procesar en su base de datos. (especialmente cuando su base de código tiene partes actualizadas por última vez en 1993 ...)