有没有好的Markdown Javascript库或控件?[关闭]


89

我想建立一个站点,用户可以在其中输入文本并在Markdown中设置其格式。我想要Javascript解决方案的原因是因为我想显示实时预览,就像在StackOverflow上一样。

我的网站不是针对开发人员的,因此,编辑器控件将是理想的选择。

我在StackOverflow上收集到的是使用了WMD编辑器。

在Google上进行快速搜索还会打开Showdown库,我认为WMD实际上正在使用该库。

还有其他选择吗?WMD / Showdown是否已经是不错的工具?您在使用不同选项时的经历是什么?

Answers:


33

如果您不反对使用Ajax生成实时预览,那么另一个选项是markItUp!。。markItUp!是通用的标记编辑器,非常灵活。它确实提供了创建标记编辑器的简便方法,但是与WMD不同,它不提供自己的实时预览。

我将markItUp!以及一个简单的JSP(使用MarkdownJ)用于我的一个开源项目(用于RollerMarkdown插件)。如果您正在使用另一种服务器端技术,请适当地替换该简单的JSP。

在遇到大规模杀伤性武器之前,我实际上开始使用它。我同意,WMD很棒,但是它只是开源的,因此在现阶段更难以自定义行为。


MarkItUp!不处理切换和粘滞选择。这是我基于JavaScript 的开源Markdown文本编辑器。它支持键盘快捷键,自定义对话框,自定义放置,还支持一些巧妙的文本选择,以鼓励用户以良好的格式编写Markdown语法: github.com/tovic/markdown-text-editor
Taufik Nurrohman 2015年

65

我们对WMD感到非常满意。但是,其中有一些小问题。没什么大不了的,但是如果约翰·弗雷泽(John Fraser)(作者)将代码设为开源代码,以便我们可以修复其中的一些代码,我将高兴。他答应这样做,但其他现实生活项目正在阻碍。

我每周都会跟进约翰。一旦WMD源代码终于可用,我将在博客上发布。一年多以来一直无法联系John Fraser。

我们已经开源了两个JavaScript Markdown库

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

和服务器端C#Markdown库

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


感谢杰夫的回答。我什至没有意识到WMD不是开源的……我会睁大眼睛。
webmat

2
您如何处理巨大的安全漏洞?例如:<div onmouseover =“ alert('hi');”> hi </ div>以上内容可在WMD演示中使用!
andrewrk

1
@ superjoe30这些东西已在服务器上过滤。
epochwolf 2011年


1
@DisgruntledGoat看着stackexchange.github.io你可以看到,它在列表中,最后提交6个月前(2015年的话)。
卢瓦克福雷-拉克鲁瓦

12

我建议mark,它轻巧,高效,易于使用,并且也支持GitHub Flavored Markdown(GFM)。它可以在服务器(nodejs)或客户端(浏览器)端使用。


标记仍在开发中,最小化版本只有23 KB大。
Peter T.

7

据我所知,Markdown确实没有其他基于浏览器的编辑器,至少没有像WMD编辑器那样广泛。

Showdown是JS中的Markdown转换器,它构成了WMD HTML预览的基础。它们都是由http://attacklab.net/制作的。

据我所知,这两者都没有太大的抱怨(至少在Markdown邮件列表中没有)。所以去吧。





3

这个问题现在更古老了,但由于提到的许多代码已经过时了几年,因此也变得更加相关。

但是,我确实发现了一些仍然是最新的:

Jquery-Markedit-这是从wmd-edit分支出来的,并且已经重构为使用jQuery。一见钟情。

EpicEditor-仍保持不变,具有灵活的解析器,并且如下文所示,作者反应迅速(请参阅下文)。IT似乎也有很好的文档。可悲的是不能与IE9一起使用。

MarkdownDeep是仍在使用的第三个选项。有趣的一点是对Markdown Extra的支持。对JQuery有依赖关系(实际上,您也可以在没有JQuery的情况下实现)。基于.NET版本,因此文档比JS版本更符合该文档。这也适用于IE9。它非常易于使用(与JQuery一起使用),而且非常简单。据我所知,这方面没有重大进展。

js-markdown-extra是PHP库的一个相当准确的端口,并且仍在维护中。它当然支持Markdown Extra。


1
实时预览可以在我的编辑器中正常工作:)以全屏打开为例,或者仅preview()在按下键盘或超时时运行。它是为任何类型的定制而构建的。
奥斯卡·戈德森

1
因此,编辑器下面是它现在的工作方式。单击预览后,它会显示隐藏的预览器,该预览器将根据您编写的内容进行更新。全屏输入时会进行排序(排序)。要制作自己的预览器,您可以执行以下操作:jsbin.com/otuyub/edit#javascript,html
Oscar Godson

1
截距?您可以这样做:editor.on('save', function(file) { console.log(file.content) })如果那是您的意思。每当保存文件时,都会吐出文件内容。
奥斯卡·戈德森

1
另外,您可能要使用on('update')而不是保存。如果您启用了自动保存,则保存会触发很多次。仅当发生更改时,更新才会触发。epiceditor.com/#events
奥斯卡·

1
仅供参考,以供阅读此文件的任何人:github.com/OscarGodson/EpicEditor/issues/137-问题是它试图在本地运行,并且IE9禁止通过文件在本地使用localStorage:\\\
Oscar Godson

2

这个问题很古老,但是希望可以对某人有所帮助。我最近刚刚发布了自己的Java 脚本降级编辑器uedit的工作版本。您可以在此处找到源代码。它适用于大多数浏览器(包括IE6 +),并且不依赖于任何外部JS库。


2

在尝试了几个插件来解决我自己提供MarkDown seudo-WYSIWYG的需求之后,我结束了实现自己的一个的工作:

也许不像这里提到的所有解决方案那样强大,但是我认为没有一个解决方案比它容易和易于集成和定制

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.