versiones pricing mce ckeditor richtextbox markdown wysiwyg

ckeditor - pricing - mce wysiwyg



Editor de texto WYSIWYG de Markdown integrado (7)

Al buscar un editor WYSIWYG directo para el código Markdown, no encuentro una interfaz de usuario comparable a la de CkEditor, TinyMCE, ect.

Específicamente, los editores Markdown "WYSIWYG" que a menudo se recomiendan (como publicaciones como this ) no son puros editores WYSIWYG en el sentido de que los usuarios todavía escriben Markdown MarkItUp ( MarkItUp ) o van al otro extremo de tener una edición en línea sin controles estándar ( Hallo ).

Necesito algo intermedio.

Estoy buscando un editor de Markdown que se vea y funcione como un cuadro de texto de CkEditor reducido, y que acepte y genere Markdown. Debería haber una barra de herramientas con un conjunto mínimo de opciones de formato (B, I, U, listas, etc.), y el área de entrada de texto debería mostrar el Markdown convertido, no el código raw. Debería haber un botón de Fuente que permitirá a los usuarios editar el Margen bruto, pero incluso eso es opcional. Ex:

Obtengo el motivo de Markdown / wiki, ect: la seguridad que ofrece. No me importa ingresar código en bruto como aquí en SE, pero mis usuarios no son frikis y no lo disfruto. No quieren ver * * * ___ y ​​espacios mezclados con su texto. Se utilizan para la edición de estilo "Word" y son más productivos en ese entorno.

Entonces, ¿hay un editor WYSIWYG realmente integrado para Markdown? Estoy escribiendo en PHP, entonces algo que puedo invocar con una clase sería perfecto.

Actualización del 23 de septiembre de 2015

CKEditor ahora tiene un addon Markdown que hace esto exactamente. El proyecto de complemento está alojado en github .

Capturas de pantalla:

13 de abril, 2015 actualización
Alguien que dice desarrollar CKEditor dice que la apariencia de CommonMark juego, y que posiblemente podamos ver una interfaz de marcado adecuada para CKEditor (lea los comentarios de la historia completa).

6 de febrero, 2015 actualización

CKEditor ahora viene con un complemento que genera (y acepta como entrada) BBCode.

Demostración: http://ckeditor.com/demo#bbcode

Estuve investigando en este tema el otro día y no he encontrado ningún editor WYSIWYG decente con salida Markdown. De hecho, primero tiene que crear un editor WYSIWG Markdown que es un editor WYSIWG HTML y solo hay algunos que se pueden usar en el mercado.

Existe la posibilidad de que pueda crear dataProcessor para CKEditor que cambiará el editor HTML al editor Markdown. Tenemos un complemento para BBCode que funciona así (ver http://nightly-v4.ckeditor.com/3737/samples/bbcode.html ).

Todo lo que tiene que hacer es implementar esta interfaz http://nightly-v4.ckeditor.com/ckeditor_api/#!/api/CKEDITOR.dataProcessor . Si revisas el código del complemento BBCode, verás algunos trucos y hacks, porque desafortunadamente la arquitectura actual de CKEditor no está lista (todavía) para crear dicho procesador de datos. Sin embargo, creo que si desea proporcionar solo algunas opciones de diseño, debería poder implementar el soporte de Markdown con bastante rapidez.

Implementé un editor muy simple que permite editar los contenidos de un <textarea> que contiene Markdown en una forma WYSIWYG.

Usé Hallo No creo que su sitio web haga obvio que no es un editor Marky WYSIWYG en sí mismo, pero la demo forja el camino a uno.

Hallo permite la edición WYSIWYG del HTML dentro de un <div> . Utilicé javascript para ocultar cualquier bloque <textarea> que tenga una clase específica de wysiwyg CSS, reemplazándolo por un <div> y copiando el contenido de <textarea> en el <div> . La copia se ejecuta a través de Showdown que produce HTML a partir de Markdown.

Otra rutina de Javascript reacciona cada vez que cambian los contenidos de <div> . Copia el contenido de nuevo en el <textarea> (ahora oculto). El contenido se ejecuta a través to-markdown para convertir de HTML a Markdown.

Si <textarea> es un campo en un <form >, el Markdown editado se enviará al servidor cuando se envíe ese formulario.

La inspiración para esto proviene del demo editor.js demo , específicamente el archivo editor.js . Lo usé como base para mi propio script junto con hallo.js , showdown.js y to-markdown.js .

Mi script, wysiwyg.js es una derivada de editor.js del demo . Algunos puntos a tener en cuenta:

  • Lo uso en una aplicación de Rails (no es lo que importa)
  • Se ejecuta ready y también en la page:load , este último porque Rails usa Turbolinks
  • Se ejecuta en ajaxComplete porque utilizo Ajax para informes de errores de formulario
  • Hay otras dependencias: JQueryUI y Rangy (los usuarios de Rails pueden hacer uso de las gemas jquery-ui-rails y rangy-rails ).
  • También Font Awesome se utiliza para los iconos de la barra de herramientas. La versión de hallo.js utilizada por la demo está actualizada (usa una versión anterior de Font Awesome ); use hallo.js .

Solo necesita agregar class=''wysiwyg'' CSS class=''wysiwyg'' a cualquier <textarea> para habilitar WYSIWYG en él. El <textarea> debe contener el texto con formato Markdown.

Esperaría que wysiwyg.js se pueda adaptar fácilmente para usar otro editor si no le gusta Hallo , siempre y cuando funcione en el HTML en un <div> . Hay bastantes para elegir, pero no todos son tan livianos como Hallo .

Un trabajo smilar que encontré es markdown-html-form . Utiliza el mismo Showdown y to-markdown .

También estoy buscando un editor de rebajas que se describe en la parte superior de este hilo

¿Has visto "herramientas de rebajas": http://md-wysiwyg.sourceforge.net/

Demostración: http://md-wysiwyg.sourceforge.net/cgi-bin/cgi_wysiwyg_test.py/

Eso parece bastante cercano a lo que estamos buscando, hace un trabajo razonable al tomar su texto enriquecido WYSIWYG y el descuento de salida. Sin embargo, falló en una excepción de codificación cuando pegué texto enriquecido de un documento de Google Docs.

SimpleMDE , un recién llegado, puede ser la respuesta. He estado buscando algo así durante un mes. Me sorprende que esto no aparezca más alto en los resultados de búsqueda. Tuve que lepture/editor un aviso en lepture/editor para encontrar esto.

Pen es un nuevo (activo a partir de 2014) editor WYSIWYG que genera un Markdown .
No es perfecto. He tenido problemas al pegar HTML allí, pero funciona.

Editar: ¡Lo siento! No da salida a Markdown. Walery Strauch señaló en los comentarios que los signos de formato Markdown que vi eran en realidad reglas de pseudo elemento de CSS:

Aún así, lo dejaré aquí como una opción ya que algunas personas votaron a favor esta respuesta y podría haber sido útil para alguien.

EDITAR 23 de septiembre de 2015

CKEditor ahora tiene un addon Markdown que hace esto exactamente. El proyecto de complemento está alojado en github .

Capturas de pantalla:

Tal como se publicó en mi actualización del 6 de febrero de 2015, CKEditor ahora incluye complementos que permiten la entrada y salida de BBCode.

Una demostración está disponible aquí: http://ckeditor.com/demo#bbcode

EDITAR 13 de abril de 2015:
Alguien que dice desarrollar CKEditor dice que la apariencia de CommonMark juego, y que posiblemente podamos ver una interfaz de marcado adecuada para CKEditor (lea los comentarios de la historia completa).