Existe alguma boa biblioteca ou controle Javascript Markdown? [fechadas]

89

Quero construir um site onde o usuário possa inserir texto e formatá-lo em Markdown. O motivo pelo qual eu gostaria de uma solução Javascript é porque desejo exibir uma visualização ao vivo, assim como no StackOverflow.

Meu site não é direcionado a desenvolvedores, portanto, um controle de editor seria o ideal.

Percebi que no StackOverflow, o editor de WMD está sendo usado.

Uma busca rápida no Google também mostra a biblioteca Showdown, que eu acho que está sendo usada por WMD.

Existem outras opções? Já são ótimas ferramentas de WMD / Showdown? Quais têm sido suas experiências com as diferentes opções?

webmat
fonte

Respostas:

33

Se você não é avesso a usar Ajax para gerar a visualização ao vivo, outra opção é markItUp! . markItUp! é um editor de marcação universal e muito flexível. Ele fornece uma maneira fácil de criar um editor de marcação, mas, ao contrário do WMD, não fornece sua própria visualização ao vivo.

Usei markItUp !, junto com um JSP simples (usando MarkdownJ ) para um dos meus projetos de código aberto (um plugin Markdown para Roller ). Se você estiver usando outra tecnologia do lado do servidor, substitua aquele JSP simples conforme apropriado.

Na verdade, comecei a usar isso antes de encontrar WMD. Eu concordo, o WMD é ótimo, mas acabou de ser liberado e é, neste estágio, mais difícil de personalizar o comportamento do.

myabc
fonte
MarkItUp! não controla alternância e seleção fixa. Este é o meu editor de texto Markdown de código aberto baseado em JavaScript. Ele suporta atalhos de teclado, diálogos personalizados, descartes personalizados e também oferece suporte a alguma seleção de texto inteligente para encorajar os usuários a escreverem sintaxe Markdown em um bom formato: github.com/tovic/markdown-text-editor
Taufik Nurrohman
65

Estamos muito felizes com as armas de destruição em massa. Existem alguns bugs mesquinhos nele, no entanto. Nada importante, mas eu adoraria se John Fraser (o autor) tornasse o código-fonte aberto para que possamos corrigir alguns deles. Ele prometeu fazer isso, mas outros projetos da vida real estão atrapalhando.

Acompanho John todas as semanas. Vou postar no blog assim que a fonte WMD estiver finalmente disponível. Não consigo entrar em contato com John Fraser há mais de um ano.

Abrimos o código da biblioteca JavaScript Markdown

http://code.google.com/p/pagedown/

e a biblioteca C # Markdown do lado do servidor

http://code.google.com/p/markdownsharp/

Jeff Atwood
fonte
Obrigado pela resposta Jeff. Eu nem percebi que WMD não era de código aberto ... Vou manter meus olhos abertos.
webmat
2
O que você fez sobre o buraco de segurança escancarado? Por exemplo: <div onmouseover = "alert ('hi');"> hi </div> O exemplo acima funciona na demonstração do WMD!
andrewrk
1
@ superjoe30 Esse material é filtrado no servidor.
epochwolf
@ superjoe30: Veja meta.stackexchange.com/questions/95821/… - o mesmo se aplica à versão JavaScript
balpha
1
@DisgruntledGoat olhando stackexchange.github.io você pode ver que é na lista e último commit foi 6 meses atrás (2015 já).
Loïc Faure-Lacroix
12

Eu recomendaria o marcado , que é leve, eficiente, fácil de usar e também suporta GitHub Flavored Markdown (GFM). Ele pode ser usado nos lados do servidor (nodejs) ou do cliente (navegador).

Malcomwu
fonte
O marcado ainda está sendo desenvolvido e a versão minimizada tem apenas 23 KB.
Peter T.
7

Pelo que eu sei, realmente não existe nenhum outro editor baseado em navegador para Markdown, pelo menos nenhum tão extenso quanto o editor de WMD.

Showdown é um conversor Markdown em JS, que forma a base para a visualização HTML de WMD. Ambos são feitos por http://attacklab.net/ .

E, até onde eu sei, não houve grandes reclamações sobre ambos (pelo menos não na lista de discussão Markdown). Então vá em frente.

Lasar
fonte
4

Strapdown.js, que foi lançado recentemente , "torna embaraçosamente simples criar documentos Markdown elegantes. Nenhuma compilação do lado do servidor necessária."

g33kz0r
fonte
3

A questão é ainda mais antiga agora, mas também mais relevante, visto que grande parte do código mencionado está vários anos desatualizado.

No entanto, encontrei alguns que ainda parecem atuais:

Jquery-Markedit - Este foi bifurcado do wmd-edit há algum tempo e refatorado para usar o jQuery. Parece bom à primeira vista.

EpicEditor - também é mantido, tem um analisador flexível e, como você pode ver a seguir, o autor é altamente responsivo (veja abaixo). A TI também parece ter uma boa documentação. Infelizmente, não funciona com o IE9.

MarkdownDeep é uma terceira opção que ainda está em vigor. O ponto interessante com este é o suporte para Markdown Extra. Depende de JQuery (na verdade, você também pode implementar sem JQuery). Baseado na versão .NET, então a documentação é mais alinhada a isso do que a versão JS. Isso também funciona com o IE9. É muito fácil de usar (com JQuery) e muito simples. Nenhum desenvolvimento significativo acontecendo com isso, pelo que posso ver.

js-markdown-extra é um port bastante preciso da biblioteca PHP e ainda está em manutenção. Ele suporta Markdown Extra, é claro.

Julian Knight
fonte
1
As visualizações ao vivo funcionam bem com meu editor :) abra em tela cheia como exemplo ou simplesmente execute preview()quando a tecla for pressionada ou um tempo limite esgotado . É construído para qualquer tipo de personalização.
Oscar Godson
1
Então, sob o editor é assim que funciona agora. Depois de clicar em visualizar, ele mostra o visualizador oculto que é atualizado com o que você escreveu. Fullscreen faz isso (sorta) enquanto você digita. Para fazer seu próprio visualizador, você poderia fazer algo assim: jsbin.com/otuyub/edit#javascript,html
Oscar Godson
1
Interceptar? Você pode fazer: editor.on('save', function(file) { console.log(file.content) })se é isso que você quer dizer. Isso cuspirá o conteúdo do arquivo sempre que o arquivo for salvo.
Oscar Godson
1
Além disso, você pode querer usar em on('update')vez de salvar. Salvar irá disparar muito se o salvamento automático estiver ativado. A atualização só será disparada quando algo mudar. epiceditor.com/#events
Oscar Godson
1
Para sua informação, para quem está lendo isso: github.com/OscarGodson/EpicEditor/issues/137 - o problema é que ele estava tentando ser executado localmente e o IE9 tem restrições de segurança contra o uso localStorage localmente via arquivo: \\\
Oscar Godson
2

A pergunta é antiga, mas espero que isso possa ajudar alguém. Eu publiquei recentemente uma versão funcional do meu próprio editor de markdown de Javascript, o uedit . Você pode encontrar o código-fonte aqui . Funciona na maioria dos navegadores (incluindo IE6 +) e não depende de nenhuma biblioteca JS externa.

schmrz
fonte
2

Depois de tentar com vários plugins resolver minhas próprias necessidades de oferecer um MarkDown seudo-WYSIWYG terminei de implementar o meu próprio:

Talvez não seja tão potente quanto todas as soluções comentadas aqui, mas acho que nenhuma é tão simples e fácil de integrar e personalizar .

Fguillen
fonte