我们应该使用哪个类似 Stack-Overflow 风格的 Markdown（WMD）JavaScript 编辑器？

Question

背景

我正在开发一个需要用户输入内容的应用程序，决定使用类似 Stack Overflow 的 Markdown 编辑器。在过去几天里研究了这个主题后，我意识到有许多基于 WMD 编辑器的分支版本，有一些基本功能增强，有一些与 Stack Overflow 版本有很大的不同。

由于这将是应用程序的核心，我想从最好的代码库开始。如果有人可以推荐哪一个最适合我的需求，我会非常高兴。

以下是要求以及我已经找到的内容。我希望这个问题能帮助我决定选择哪个版本，并可能帮助我发现更适合我需求的编辑器。

---

我的项目要求

• 实时预览
• 在同一页上显示多个编辑器（我无法提前知道有多少个，因为用户可以动态添加另一个编辑框）。
• 能够添加额外按钮扩展（我想添加一个上传图片的按钮，而不仅仅是添加一个 img URL）。
• 具有动态显示/隐藏编辑框的功能（只看到预览框）。
• 虽然不是绝对必要的，但我更喜欢保持与 Stack Overflow 的外观和感觉尽可能接近，因为它很出名。
• 不知道是否重要，但后端是使用 Django 编写的。

我看过的编辑器

以下是我看过的一些代码库及其想法。显然，我可能会遗漏其他解决方案。

• derobins 版本。据我所知，这是官方的 Stack Overflow 版本。似乎不支持在同一页上显示多个编辑器。
• jQuery.MarkEdit。看起来非常好，但与 Stack Overflow 版本相差很大。

MooWMD。看起来现在是获胜者，但我有些担心，因为它看起来不太活跃/易于修改，比MarkEdit差一些。

wmd-new版本。不确定，看起来像一个很少使用的旧代码库。

SocialSite分支。似乎不适用于公共使用。

- Edan Maor

---

好问题。我正在调查这个问题，到目前为止，我已经发现在Chrome的derobins版本和其他版本中，列表的自动缩进功能存在问题。SO版本似乎已经关闭了此自动缩进功能，尽管我不确定是如何实现的（doList仍然存在）。 - David Johnstone

我相信我遇到了一个开源版本的真正物品。但是我再也找不到它了。 - Wolfpack'08

Answer 1

最终，在寻找现成编辑器的过程中，我选择了OpenLibrary WMD移植版，位于http://github.com/openlibrary/wmd。

我选择这个编辑器的原因

1. 符合我的大部分要求。
2. 看起来像Stack Overflow的编辑器。有一些行为上的差异（见下文）。
3. 基于jQuery构建（不需要MooTools，这比另一个重要竞争者mooWMD要好）。

最终我自己实现了显示/隐藏编辑框的功能，这在大部分情况下都很容易。我没有添加任何按钮来扩展编辑器，但我相信这将需要在其源代码中进行一些修改，但我认为这不是什么大问题。

与Stack Overflow版本的不同之处

与Stack Overflow编辑器有几点不同：

1. 单个换行符会产生一个<br/>标签，而不是被视为一个段落。我碰巧喜欢这种方式，所以我对这个修改很满意。
2. 编号列表是自动编号的，类似于Microsoft Word。也就是说，在编写“1.第一项”后按下Enter键会自动得到以“2.”开头的新行。这也是我真正喜欢的一种改变。

希望这能帮助任何寻找类似编辑器的人。如果我最终对编辑器进行了定制，我将创建自己的分支（它基于MIT许可证），但现在我正在不用更改源代码的情况下使用它。

- Edan Maor

---

你好，我刚下载了openlibrary/wmd，但好像无法正常工作，jquery.wmd.min.js存在问题。 - Ray

Answer 2

这个问题（及其解决方案）已经相当古老了，因此我认为在这里提供一些最新信息。

现在是2014年初，当我遇到同样的问题时，我最终使用了PageDown-Bootstrap。它是基于Twitter Bootstrap 的WMD编辑器，具有完全可定制的样式栏（按钮栏）。

还有一个叫做Bootstrap-Markdown的替代品，看起来也非常有前途。

- Ory Band

Answer 3

对于实时预览部分，Showdown 库非常易于使用（正如 Edan 所指出的那样，已包含在代码库中）。

您可以像这样使用它（如果不想使用 jQuery，则无需使用）：

$(document).ready(function(){
    var converter = new Attacklab.showdown.converter();
    function update_description_preview(){
        $('#description-preview').html(converter.makeHtml($("#id_description").val()));
    }
    update_description_preview();

    $("#id_description").keyup(function(){
        update_description_preview();
    });
});

update_description_preview函数使用转换器对象读取#id_description元素中的markdown，并将其转储到#description-preview元素中。

在此，我在定义后立即调用该函数以初始化预览窗口（编辑器中预加载了一些文本）

最后一部分只是将该函数注册到keyup事件中。

- Chris Lawlor

---

WMD（至少是StackOverflow版本）不使用Showdown.js进行转换吗？至少在某个时候我是这样理解的。 - Edan Maor

哦，忘记了 showdown 已经包含在代码库中了。我的上一个项目只有实时预览（Markdown 语法手动输入，没有 JS 编辑器），所以我需要单独使用 showdown。 - Chris Lawlor

Answer 4

不确定它是否完全符合旧要求，但2014年另一种解决方案是开源Markdown编辑器，采用Apache 2.0许可证并由topten software创建，具备预览功能。

在线演示可在此处找到：http://www.toptensoftware.com/markdowndeep/dingus

- xmojmr

Answer 5

标准通用Markdown包含一个独立的javascript文件，用于将markdown转换为html。它很容易实现，正如官方演示或这个plunker所示。

大致意思：

<script src="//jgm.github.io/stmd/js/stmd.js"></script>
...
var reader = new stmd.DocParser();
var writer = new stmd.HtmlRenderer();
...
var parsed = reader.parse("Some **markdown** text");
var result = writer.renderBlock(parsed);

- Ben Haley