2011-12-19 12 views
14

Perdóname si esto ha sido respondido. He mirado alrededor, pero no encontré nada.Live preview markdown editor

Estoy creando un sitio para personas no tecnológicas y requiere que puedan agregar contenido de texto enriquecido. He estado buscando en Markdown para esto, y me gustaría usar eso.

He estado buscando un buen control (jquery) ui para hacer la edición simple, pero todo lo que he visto tiene la vista previa en vivo viviendo en otro lugar en la página que no sea el cuadro de entrada. (WMD es así, markitup, etc.)

Me gustaría utilizar algo que lo haga sentir como si estuviera usando un procesador de texto. Como lo hace TinyMCe, pero se ejecuta en Markdown, no HTML

¿Hay algo así, o tal vez en algún lugar que muestra cómo construirlo?


Para aclarar, estoy buscando un editor que lo haga sentir como si estuviera escribiendo en la vista previa en vivo; no es un cuadro de texto con una vista previa arriba/abajo.

+0

Estoy un poco confundido - Markdown (el lenguaje de marcado) es su propia interfaz de usuario - y HTML es un back-end mucho mejor para una experiencia de procesador de texto similar a IMO. ¿O estás pensando en algo donde edites rebajas y veas una vista previa en vivo del contenido? (como por ej., por ejemplo, la interfaz de respuesta SO) –

+2

Sí, al igual que SO solo, no quiero que sientan que están editando un cuadro de texto con una vista previa a continuación. Más como usar Word, pero Markdown es lo que se está generando, no Html. ¿Eso ayuda? – Joe

+0

Entonces, ¿necesita algo que convierta HTML en reducción? – fncomp

Respuesta

0

Desde entonces he encontrado algo que amo. el Pen editor on Github hace justo lo que yo quería. Me alegra ver que alguien ha tomado esto en

-4

El descuento no sería compatible con un editor WYSIWYG. Considere esta muestra de rebajas:

Let's link to [Google][]. 

    [Google]: http://www.google.com/ 

Si hacía un editor WYSIWYG, lo que ocurriría después de teclear [Google]? ¿Vería texto subrayado en azul? ¿Vería [Google] ya que aún no es un hipervínculo válido? ¿Qué pasa después de que escribe el [] posterior? Todavía no es un hipervínculo completamente definido; no puede hacer clic en él, porque Markdown no sabe dónde se vincula.

¿Y cómo escribe el usuario esa línea de seguimiento [Google]: http://www.google.com/? Esa línea no se muestra; es marcado; es invisible ¿Dónde se escribe texto invisible en un editor WYSIWYG?

+3

SO proporciona una vista previa, ¿verdad? Justo debajo del cuadro de entrada. Me gustaría * que * sienta que está editando en la vista previa.Sé que hay desafíos, y es por eso que probablemente no pude encontrar ninguno. No significa que no puedan ser resueltos. – Joe

+1

Y (dado que es para no expertos en tecnología) podría hacer que usen la barra de herramientas para formatear, ¿verdad? Así que simplemente escriben 'Lets link to Google' para resaltar' Google', hacen clic en el botón de enlace y proporcionan una Url. – Joe

+0

Si va a ignorar los aspectos de Markdown de Markdown, entonces ¿por qué le importa que sea Markdown? Parece que un editor WYSIWYG para HTML también le serviría. –

4

Si consigo lo que estás buscando, entonces el enfoque más sencillo sería generar HTML con TinyMCE o CKEditor, a continuación, aplicar algo así como Markdownify a la salida de, por ejemplo, tinymce.getContent().

+3

Acabo de ver la fuente Markdownify. Parece un pequeño y divertido proyecto convertirlo a un plugin TinyMCE. Si hay un interés real en esto, estaría feliz de pasar un poco de tiempo. (He escrito una tonelada de complementos de TinyMCE en el trabajo). – fncomp

+0

no es lo más elegante, pero funcionaría. Preferiría no desperdiciar la recompensa, así que puedes tenerla :) – Joe

0

Salida Stack Edit Es un gran editor WYSIWYG de rebajas - sincroniza con Google Docs, Dropbox & CouchDB, publica a Github (y muchos otros lugares), y ofrece un fácil intercambio de enlaces. Puede acceder a él en su sitio web o utilizando la aplicación de Chrome. Puede crear títulos y listas en el editor allí, y le mostrará el texto correspondiente en formato de reducción. Luego puede guardar, publicar, compartir o descargar el archivo.