Question

背景

我正在开发一个需要用户输入内容的应用程序，我决定使用Stack Overflow风格的Markdown编辑器。在研究了这个主题的最后几天之后，我意识到基础WMD编辑器有很多分叉，一些有一些基本的增强功能，有些与Stack Overflow有很大不同。

由于这将是应用程序的核心，我想从最好的代码库开始。如果有人能够推荐哪种解决方案最适合我的需求，我会很高兴。

以下是要求，以及我已经设法找到的内容。我希望这个问题可以帮助我决定使用哪个版本，也许可以帮助我找到一个更符合我需求的端口。

我项目的要求

实时预览
同一页面上的多个编辑器（我不知道提前多少，因为用户可以动态添加另一个编辑框）。
能够使用额外按钮进行扩展（我想要一个按钮来上传图片，而不是仅添加img网址。）
能够动态显示/隐藏编辑框（并且只能看到预览框）。
不是绝对必须，但我更喜欢坚持Stack Overflow的外观和感觉，因为它是众所周知的。
不知道这是否重要，但后端是用Django编写的。

我看过编辑

以下是我看过的一些代码库，有了想法。显然，我可能会错过另一种解决方案。

derobins版本。据我所知，这是官方Stack Overflow版本。好像它不支持一页上的多个编辑器。
jQuery.MarkEdit。看起来非常好，但与Stack Overflow版本完全不同。
MooWMD。现在看起来像是胜利者，但我有点担心，因为它看起来不如MarkEdit那样活跃/可攻击。
wmd-new版本。不确定，看起来像一个没有太大用处的旧代码库。
SocialSite branch。似乎它不适合公众使用。

Answer 1

最后，在为现成的编辑器查看了一下之后，我选择了位于http://github.com/openlibrary/wmd的OpenLibrary WMD端口。

我选择此编辑器的原因

符合大多数的要求。
看起来像Stack Overflow的编辑器。存在一些行为差异（见下文）。
构建于jQuery之上（并且不需要MooTools，这比其他严肃的竞争者mooWMD更好。

我最终实现了自己显示/隐藏编辑框的功能，这在大多数情况下证明非常容易。我没有用任何按钮扩展编辑器，我肯定会在其源代码中有些麻烦，但我认为这不会太大。

与Stack Overflow版本的区别

Stack Overflow编辑器有一些不同之处：

单行在行尾输入会导致<br/>，而不是被视为一个段落。我碰巧喜欢这种方式，所以我对这种改变很好。
编号列表是自动编号的，是Microsoft Word。也就是说，在写完“1. first item”后点击 Enter 将自动为您提供以“2.”开头的行。这也是我非常喜欢的改变。

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

Answer 2

嗯，这个问题（以及解决方案）已经老了，所以我想也许我会在这里提出一些最新消息。：）

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

还有一个名为Bootstrap-Markdown的替代方案，看起来也很有希望。

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事件中注册该函数。

Answer 4

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

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

Answer 5

~~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);

我应该使用哪种Stack Overflow-style Markdown（WMD）JavaScript编辑器？

背景

我项目的要求

我看过编辑

5 个答案:

我选择此编辑器的原因

与Stack Overflow版本的区别