Editor de texto Markdown WYSIWYG integrado

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

Específicamente, los editores "WYSIWYG" de Markdown que a menudo se recomiendan (como publicaciones como esta ) no son editores WYSIWYG puros en el sentido de que los usuarios todavía escriben Markdown sin procesar ( MarkItUp ) o van al otro extremo de tener 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 CkEditor simplificado, y que acepte y genere Markdown. Debe 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 debe mostrar el Markdown convertido, no el código sin formato. Debería haber un botón de Fuente que permita a los usuarios editar el Markdown sin procesar, pero incluso eso es opcional. Ex:

Entiendo el motivo de Markdown / wiki, etc., la seguridad que ofrece. No me importa ingresar código sin formato como aquí en SE, pero mis usuarios no son geeks y no encuentran esto agradable. No quieren ver * * * ___ y ​​espacios mezclados con su texto. Están acostumbrados a la edición de estilo "Word" y son más productivos en ese entorno.

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

Actualización del 23 de septiembre de 2015

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

Capturas de pantalla:

Actualización del 13 de abril de 2015
Alguien que profesa desarrollar CKEditor dice que la apariencia de CommonMark cambia las reglas del juego y que posiblemente podríamos ver una interfaz de marcado adecuada para CKEditor (lea los comentarios para ver la historia completa).

Actualización del 6 de febrero de 2015

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

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

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

Existe la posibilidad de que pueda crear dataProcessorpara CKEditor que cambie el editor HTML en el editor Markdown. Tenemos un complemento para BBCode que funciona así (consulte http://nightly-v4.ckeditor.com/3737/samples/bbcode.html ).

Todo lo que tienes que hacer es implementar esta interfaz http://nightly-v4.ckeditor.com/ckeditor_api/#!/api/CKEDITOR.dataProcessor . Si verifica el código del complemento BBCode, verá algunos trucos y trucos, 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 estilo, debería poder implementar el soporte de Markdown con bastante rapidez.

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

EDITAR 23 de septiembre de 2015

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

Capturas de pantalla:

Según lo publicado 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 profesa desarrollar CKEditor dice que la apariencia de CommonMark es un cambio de juego, y posiblemente podríamos ver una interfaz de marcado adecuada para CKEditor (lea los comentarios para la historia completa).

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

Editar: ¡Lo siento! No genera Markdown. Walery Strauch señaló en los comentarios que los signos de formato de Markdown que vi eran en realidad reglas de pseudoelemento CSS:

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

Implementé un editor muy simple que permite que el contenido de un <textarea> editar Markdown en forma WYSIWYG.

Solía Hola . No creo que su sitio web deje en claro que no es en sí mismo un editor Markdown WYSIWYG, pero la demostración abre el camino hacia uno.

Hallo permite la edición WYSIWYG del HTML dentro de un <div>. Solía javascript para ocultar los <textarea>bloques que tienen una específica wysiwygclase CSS, sustituyéndolo por una <div>y copiar el contenido de la <textarea>al <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 <div>cambia el contenido. Copia el contenido de nuevo en el (ahora oculto) <textarea>. El contenido se ejecuta hasta la rebaja. convertir de HTML a Markdown.

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

La inspiración para esto proviene del ejemplo de Hallo Markdown , 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 un derivado de editor.js del ejemplo de Hallo Markdown . Algunos puntos a tener en cuenta:

• Yo uso esto en una aplicación Rails (no es que eso importe)
• Funciona readyy también funciona page:load, esto último porque Rails usa Turbolinks
• Se ejecuta ajaxCompleteporque uso Ajax para informes de errores de formulario
• Hay otras dependencias: JQueryUI y Rangy (los usuarios de Rails pueden aprovechar las gemas jquery-ui-rails y rangy-rails ).
• También se utiliza Font Awesome para los iconos de la barra de herramientas. La versión de hallo.jsutilizada por la demostración está desactualizada (usa una versión anterior de Font Awesome ); use hallo.js de GitHub en su lugar.

Solo necesita agregar CSS class='wysiwyg'a cualquiera <textarea>para habilitar WYSIWYG en él. los<textarea> debe CONAIN de rebajas texto con formato.

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

Un trabajo similar que encontré es markdown-html-form . Utiliza el mismo Showdown y 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 generar rebajas. Sin embargo, falló en una excepción de codificación cuando pegué un texto enriquecido de un documento de Google.