construyendo un editor wysiwyg

Necesito build un editor wysiwyg para un proyecto en el que estoy trabajando y necesito alguna guía. Algunos de mis puntos key de confusión son los siguientes:

iframe docs vs. contenteditable divs : ¿cuál debería usar y por qué? Odio iframes, ¿hay una clara ventaja en el uso de iframes?

estilo cross browser : execCommand parece aplicar diferentes styles en diferentes browseres. ¿Hay algún truco para hacer compatible este browser cruzado? ¿Debo usar execCommand y aplicar mis propios styles?

agregar elementos a la cadena de deshacer : ¿cómo puedo ejecutar mi propio script, como insert una image, y permitir que cntrl + z (deshacer) lo elimine? ¿Hay una serie de elementos de deshacer / rehacer para contenteditable en los que puedo insert elementos?

mantener la selección de text : cómo puedo mantener la selección de text mientras realizo operaciones como seleccionar el estilo de fuente, donde el foco saldrá y eliminaré mi selección. ¿ Rangy ? Cierre de Google ? ¿Hay otras bibliotecas de range / selección que valga la pena mirar?

Cualquier sugerencia sobre estos artículos o cualquier otra cosa relacionada con la construcción de un editor de text enriquecido sería muy apreciada.

Por experiencia personal, recomiendo no hacerlo a less que tu objective sea proporcionar una cantidad muy limitada de funcionalidad. La gran cantidad de diferencias entre browseres y la complejidad de sus soluciones hace que esta sea una tarea muy complicada y lenta si desea hacerlo bien.

Si eso no lo ha desanimado, aquí está mi opinión sobre sus preguntas individuales:

iframe docs vs. contenteditable divs

Recomiendo el enfoque iframe, por dos razones principales:

  • Usted tiene control total sobre el tipo de documento, CSS y script dentro del iframe. Esto es esencial si desea un comportamiento y una apariencia consistentes y desea usar su editor en diferentes páginas.
  • Firefox, en particular, tiene errores con elementos contenteditable , que solo introdujeron hace relativamente poco time (versión 3.0), mientras que DesignMode ha existido en documentos durante muchos años (desde antes de 1.0, alnetworkingedor de 0.6, si sirve la memory) y funciona bastante bien.

cruzar el estilo del browser

Si es importante que obtengas resultados uniformes aplicando styles en diferentes browseres, en general necesitarás escribir tu propio código de estilo. Sin embargo, al hacerlo se romperá la stack de deshacer integrada y tendrás que implementar tu propio sistema de deshacer / rehacer.

agregar elementos a la cadena de deshacer

No hay una forma programática de interactuar con la stack de deshacer integrada del browser. Tendrás que escribir el tuyo.

Actualización noviembre de 2012

Hay una especificación en process para deshacer / rehacer personalizado, por lo que es posible que esto sea posible eventualmente. Aquí están los errores relevantes para Mozilla y WebKit .

manteniendo la selección de text

Debo declarar mis intereses aquí, ya que escribí Rangy . No creo que haya una mejor biblioteca por ahí que haga un trabajo similar; Google Closure tiene una API de range / selección, pero creo que usa su propia interfaz propietaria en lugar de emular la gama DOM y los objects comunes de selección de browser. IERange es otra biblioteca que tiene una idea similar a la de Rangy pero mucho less realizada y aparentemente abandonada inmediatamente después del lanzamiento de su autor.

No, en serio, no.

Lo que sugiere es una gran empresa. Deberías estar mirando TinyMCE, http://tinymce.moxiecode.com/ , o CKEditor, http://ckeditor.com/ . Obtener lo que busca es una enorme cantidad de esfuerzo para trabajar en una versión de un browser, para que sea portátil llevará años-hombre de inversión.

Una mejor solución es mirar cosas como los complementos de TinyMCE, http://tinymce.moxiecode.com/plugins.php . Puede get los conceptos básicos (y la portabilidad de forma gratuita) y concentrarse en agregar los elementos específicos de valor agregado que necesita.