Editor de texto Markdown WYSIWYG integrado

101

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:

insira a descrição da imagem aqui

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:

redução WYSIWYG

fonte de redução


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

um codificador
fonte
Ahola Editor, como sugerido nesta resposta à pergunta do SO que você vincula, é um editor WYSIWYG HTML5 que parece fazer exatamente o que você está procurando. Ele ainda tem uma sugestão da faixa de opções do Office. Existe uma razão pela qual você descontou isso?
Chris,
1
Infelizmente, não consigo entender seu último comentário. Ahola é "editar no local", como todos os editores WYSIWYG. A caixa de edição do Aholda é apenas um dive a barra de ferramentas é outra div; essas podem ser as únicas coisas na página. A solução Ahola atende aos seus requisitos para 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." Você pode explicar mais claramente porque esta não é uma solução que você considerará.
Chris
1
Markdown substitui todos esses editores WYSIWYG por si só. Por que você precisa de saída de redução?
Pol
4
@Pol: Porque é seguro armazenar e exibir posteriormente, ao contrário do HTML?
Dan Abramov
1
Eu também não estou entendendo essa pergunta. Você pode usar Markdown para gerar HTML ou usar um editor WYSIWYG para gerar HTML. Por que você deseja usar um editor WYSIWYG para gerar Markdown? Se isso é realmente o que você deseja, você sempre pode usar o CKeditor e transformar o HTML em Markdown.
mb21

Respostas:

13

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.

Reinmar
fonte
30

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.

insira a descrição da imagem aqui

HNL
fonte
1
Uau, obrigado por compartilhar isso - isso é EXATAMENTE o que eu estava procurando. Impressionante!
Jared White
1
Obrigado HNL, mesmo aqui.
Melvin
4
Porém, não é verdade WYSIWYG. Ele mistura o markdown na janela do editor. O que se busca nesta pergunta é um editor que mostre tanto a visão finalizada quanto o código-fonte em visualizações separadas (com um botão 'código-fonte' na barra de ferramentas, para ficar inquieto).
um codificador de
9

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:

redução WYSIWYG

fonte de redução


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).

um codificador
fonte
"Será que esta coisa exata?" De acordo com os pontos comuns do add-on, o ckeditor ainda gera HTML e não o Markdown com esse add-on.
user764754
8

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.

Dan Abramov
fonte
O demo da caneta é editado no local, não no que o OP (eu) estava / está interessado. Não há tempo para instalar neste segundo. Existe uma opção de caixa de texto tradicional?
um codificador de
@Acoder: Que pena! Não sabia que você queria uma barra de ferramentas fixa. O que há de errado com o Halo ? Ele tem uma barra de ferramentas agora ..
Dan Abramov
2
Este ainda é o layout css nesta captura de tela. Gostaria de obter os dados de marcação (dê uma olhada na minha captura de tela i.imgur.com/fM4jFl2.png )
Walery Strauch
1
@WaleryStrauch Uau, eu estava sendo realmente estúpido. Não percebi que não é realmente a saída. Desculpe por desperdiçar seu tempo! Vou atualizar a resposta.
Dan Abramov de
3
.. agora parece ter pelo menos suporte beta para a saída de Markdown.
pjz
4

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 .

starfry
fonte
Olá @starfry, tentei reproduzir o que você descreveu acima usando o seu wysiwyg.js, mas não encontrei nenhum grande sucesso. Quer saber se você tem um HTML associado escondido em algum lugar também? Lista de versões estáveis ​​das dependências, etc.? Obrigado!
Jameson
1
@Jameson Eu adicionei algumas notas à minha essência . Espero que ajudem! Sinta-se à vontade para adicionar comentários à essência se tiver alguma dúvida.
starfry
3

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.

robertjd
fonte
O código-fonte para este mostra HTML e não markdown.
um codificador de