Editor de texto Markdown WYSIWYG integrado

Ao procurar um editor WYSIWYG direto para o código Markdown, não estou encontrando uma IU comparável com a do CkEditor, TinyMCE, ect.

Especificamente, os editores Markdown "WYSIWYG" que muitas vezes são recomendados (como postagens como esta ) não são editores WYSIWYG puros, no sentido de que os usuários ainda escrevem Markdown bruto ( MarkItUp ) ou vão para o outro extremo de ter edição em linha sem controles padrão ( Hallo ).

Eu preciso de algo intermediário.

Estou procurando um editor Markdown que se pareça e funcione como uma caixa de texto CkEditor simplificada e que aceite e produza Markdown. Deve haver uma barra de ferramentas com um conjunto mínimo de opções de formatação (B, I, U, listas, ect), e a área de entrada de texto deve mostrar o Markdown convertido, não o código bruto. Deve haver um botão Source que permitirá aos usuários editar o Markdown bruto, mas mesmo isso é opcional. Ex:

Eu entendi o motivo do Markdown / wiki, ect - a segurança que ele oferece. Não me importo de inserir código bruto como aqui na SE, mas meus usuários não são geeks e não acham isso agradável. Eles não querem ver * * * ___ e espaços misturados com seu texto. Eles são usados ​​para edição no estilo "Word" e são mais produtivos nesse ambiente.

Então - existe um editor WYSIWYG verdadeiramente integrado para Markdown? Estou escrevendo em PHP, então algo que eu possa invocar com uma classe seria perfeito.

Atualização de 23 de setembro de 2015

O CKEditor agora tem um addon Markdown que faz exatamente isso. O projeto addon está hospedado no github .

Capturas de tela:

Atualização de 13 de abril de 2015
Alguém que professa desenvolver o CKEditor diz que a aparência do CommonMark é uma virada de jogo e poderíamos ver uma interface de marcação adequada para o CKEditor (leia os comentários para a história completa).

Atualização de 6 de fevereiro de 2015

O CKEditor agora vem com um plugin que produz (e aceita como entrada) BBCode.

Demo: http://ckeditor.com/demo#bbcode

Eu estava pesquisando sobre esse assunto outro dia e não encontrei nenhum editor WYSIWYG decente com saída de Markdown. Na verdade, primeiro você tem que criar um editor WYSIWG Markdown, é o editor HTML WYSIWG e há apenas alguns deles que podem ser usados ​​no mercado.

Há uma chance de você ser capaz de criar dataProcessorpara CKEditor que mudará o editor de HTML para o editor de Markdown. Temos um plugin para BBCode que funciona assim (confira http://nightly-v4.ckeditor.com/3737/samples/bbcode.html ).

Tudo que você precisa fazer é implementar esta interface http://nightly-v4.ckeditor.com/ckeditor_api/#!/api/CKEDITOR.dataProcessor . Se você verificar o código do plugin BBCode, verá alguns truques e truques, porque infelizmente a arquitetura do CKEditor atual não está pronta (ainda) para criar tal processador de dados. No entanto, acredito que se você quiser fornecer apenas algumas opções de estilo, deverá ser capaz de implementar o suporte a Markdown rapidamente.

SimpleMDE , um novato, pode ser a resposta. Estou procurando algo assim há um mês. Estou surpreso que isso não apareça em uma posição superior nos resultados da pesquisa. Tive que passar por um aviso no lepture / editor para encontrar isso.

EDITAR 23 de setembro de 2015

O CKEditor agora tem um addon Markdown que faz exatamente isso. O projeto addon está hospedado no github .

Capturas de tela:

Conforme postado em minha atualização de 6 de fevereiro de 2015, o CKEditor agora inclui plug-ins que permitem entrada e saída do BBCode.

Uma demonstração está disponível aqui: http://ckeditor.com/demo#bbcode

EDITAR 13 de abril de 2015:
Alguém que professa desenvolver o CKEditor diz que a aparência do CommonMark é uma virada de jogo, e poderíamos ver uma interface de marcação adequada para o CKEditor (leia os comentários para a história completa).

Pen é um novo editor WYSIWYG (ativo desde 2014) que produz Markdown .
Não é perfeito - tive problemas para colar HTML lá - mas funciona.

Edit: Desculpe! Não produz Markdown. Walery Strauch apontou nos comentários que os sinais de formatação do Markdown que vi eram, na verdade, regras de pseudoelemento CSS:

Ainda assim, vou deixá-lo aqui como uma opção, já que algumas pessoas votaram a favor dessa resposta e pode ter sido útil para alguém.

Implementei um editor muito simples que permite que o conteúdo de um <textarea>que contém Markdown seja editado de forma WYSIWYG.

Eu usei Hallo . Não acho que seu site deixe claro que ele não é um editor Markdown WYSIWYG, mas a demo abre caminho para um.

Hallo permite a edição WYSIWYG do HTML dentro de um <div>. Usei javascript para ocultar quaisquer <textarea>blocos que tenham uma wysiwygclasse CSS específica , substituindo-o por a <div>e copiando o conteúdo de <textarea>no <div>. A cópia é executada através do Showdown, que produz HTML a partir do Markdown.

Outra rotina Javascript reage toda vez que o <div>conteúdo muda. Ele copia o conteúdo de volta para o (agora oculto) <textarea>. O conteúdo é executado até o markdown para converter de HTML em Markdown.

Se <textarea>for um campo em um <form>, o Markdown editado será enviado ao servidor quando o formulário for enviado.

A inspiração para isso vem do Exemplo Hallo Markdown , especificamente o arquivo editor.js . Usei isso como base para meu próprio script, juntamente com hallo.js , showdown.js e to-markdown.js .

Meu script, wysiwyg.js , é um derivado de editor.js do Exemplo de Hallo Markdown . Alguns pontos a serem observados:

• Eu uso isso em um aplicativo Rails (não que isso importe)
• Ele roda em readye também page:load, o último porque Rails usa Turbolinks
• Funciona ajaxCompleteporque eu uso Ajax para relatórios de erro de formulário
• Existem outras dependências: JQueryUI e Rangy (usuários de Rails podem aproveitar as joias jquery-ui-rails e rangy-rails ).
• Também Font Awesome é usado para os ícones da barra de ferramentas. A versão do hallo.jsusado pelo demo está desatualizada (usa uma versão antiga do Font Awesome ) - use hallo.js do GitHub .

Você só precisa adicionar CSS class='wysiwyg'a qualquer um <textarea>para habilitar WYSIWYG nele. O <textarea>deve conter texto formatado em Markdown.

Eu esperaria que wysiwyg.js pudesse ser facilmente adaptado para usar outro editor se você não gostar do Hallo , contanto que funcione no HTML em a <div>. Existem alguns para escolher, mas nem todos são tão leves quanto Hallo .

Um trabalho semelhante que encontrei é markdown-html-form . Ele usa o mesmo Showdown e to-markdown .

Também estou procurando um editor de remarcação que é descrito no início deste tópico

Você já viu "ferramentas de marcação": http://md-wysiwyg.sourceforge.net/

Demo: http://md-wysiwyg.sourceforge.net/cgi-bin/cgi_wysiwyg_test.py/

Isso parece muito próximo do que estamos procurando, ele faz um trabalho razoável pegando seu rich text WYSIWYG e produzindo markdown. No entanto, ele falhou em uma exceção de codificação quando colei algum rich text de um documento do Google.