我们应该使用哪种 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 branch。好像不是公用的。

Answer 1

对于实时预览部分，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 事件注册函数。

Answer 2

Standard Common Markdown 包含一个独立的 javascript 文件，用于将 markdown 转换为 html。如官方demo或此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);

Answer 3

不确定它是否完全符合旧要求，但 2014 年推出的另一种解决方案是开源 Markdown 编辑器，其预览版在 Apache 2.0 下获得许可，由 topten 软件创建。

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

Answer 4

好吧，这个问题（和解决方案）已经很老了，所以我想也许我会在这里更新一些东西。 :)

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

还有一个叫做Bootstrap-Markdown的替代方案，看起来也很有前途。

Answer 5

最后，在四处寻找现成的编辑器后，我选择了 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. first item”之后点击Enter会自动得到一个以“2.”开头的行。这也是我非常喜欢的一个变化。

嗯，我希望这对寻找类似编辑器的人有所帮助。如果我最终自定义编辑器，我将创建自己的分支（它在 MIT 许可下获得许可），但现在我无需修改源代码就可以离开了。