2011-04-16 28 views
5

Creo que el título es bastante autoexplicativo, pero aún así, tal vez, debería preguntar en detalle. Estoy construyendo un editor WYSIWYG y estoy realmente al principio. Entonces, me di cuenta de que tal vez conocer los pros y contras me iluminaría. Básicamente, mi pregunta es, ya que quiero un editor que funcione al menos con un 90% en todos los principales navegadores, qué más puedo ir usando contenteditable dentro de un div y cuáles son los inconvenientes y ventajas de usar contenteditable en comparación con designMode y iframe. ? Además, mientras investigaba, encontré this editor. Creo que no está utilizando ninguno de estos atributos y está moviendo la ubicación de textarea. ¿Es este un mejor enfoque? Bueno, sé que hay muchos factores que influyen en la respuesta a la última pregunta, pero como mencioné, lo más importante que busco en el editor es que puede ser utilizado por el 90% de los usuarios. NB: no quiero usar ninguna biblioteca de terceros.¿Qué tan confiable es usar contenteditable en un div para un editor WYSIWYG?

+0

El editor que mencionas no es un editor WYSIWYG, solo un editor de texto sin formato con – user123444555621

Respuesta

2

Para la mayoría de los usos, mi preferencia sigue siendo para un iframe con designMode en la mayoría de los navegadores y un elemento contenteditable <body> en IE, que hace que sea más fácil trabajar con él. Las razones:

  • que tiene el contenido editable en un iframe cajas de arena con eficacia y le permite soltar el editor en cualquier página con la confianza de que el CSS de la página y eventos DOM no pueden afectar el contenido editable
  • designMode es más fiable en Firefox. He visto varios errores con contenteditable que no existen con designMode, que es probablemente porque contenteditable fue introducido en Firefox hace relativamente poco tiempo, mientras que designMode ha existido desde alrededor de 2003.

En cuanto a ACE, su enfoque es inteligente área de texto y tiene muchas ventajas, pero sospecho que el enfoque se limita a las fuentes monoespaciadas. Además, CodeMirror 2 uses a related approach pero está limitado de forma similar a fuentes monoespaciadas.

+0

gracias Tim. Lo único que me pega usando contentEditable es que no me gusta usar iframe. Probablemente debido a las lecturas anteriores que hice hace años en esta etiqueta. O tal vez un malentendido. Creo que usar div es mucho más válido que iframe. Eso solo es una creencia, pero no hice una investigación :) En cuanto a FF, sé que contenteditable no es compatible con Firefox 2, pero después de haber investigado un poco, he encontrado que ff2 no ​​tiene ni la parte del 1% entre los principales navegadores Entonces, ¿cree que un buen editor WYSIWYG (al menos el 90% de los usuarios apuntados) es posible usando contentEditable? – Shaokan

+0

@Shaokan: Sí, creo que contenteditable es utilizable tal como es.Sin embargo, no hay nada inválido en un iframe, y al menos dos de los principales editores WYSIWYG (TinyMCE y CKEditor) los usan. –

+0

Gracias otra vez Tim :) – Shaokan

2

Los designMode y contentEditable atributos, y las API que impulsan editores de texto enriquecido, se implementan en todos los principales navegadores, incluyendo Firefox, Opera, Safari, Google Chrome, y por supuesto Internet Explorer.

http://blog.whatwg.org/the-road-to-html-5-contenteditable

Marcos Finkle escribió un buen high-level summary of designMode, y más tarde añadió a post about contentEditable.

+0

gracias amigo, he comprobado el enlace, bonito tut. – Shaokan

4

contentEditable no funciona con los flotadores en el IE:

<p> 
    <img style="float:left" src="foo"> 
    <p contentEditable="true">very long text here ... 
    ... this text won't flow round the image</p> 
</p> 

Esto se debe a contentEditable desencadena la infame hasLayout. Aparte de eso, todo funciona bastante bien.

+0

hmm ¡No lo sabía, muchas gracias! Yo me advirtió sobre un posible problema :) – Shaokan

Cuestiones relacionadas