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

Question

背景

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

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

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

---

我的项目的要求

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

编辑我看过了

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

• 该derobins版本.据我所知,这是官方Stack Overflow版本.好像它不支持一页上的多个编辑器.
• jQuery.MarkEdit.看起来非常好,但与Stack Overflow版本完全不同.
• MooWMD.看起来像现在的赢家,但我有点担心,因为它看起来不像MarkEdit那么活跃/可攻击.
• 在大规模杀伤性武器的新版本.不确定,看起来像一个没有太大用处的旧代码库.
• 该SocialSite分支.似乎它不适合公众使用.

Answer 1

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

我选择这个编辑器的原因

1. 符合我的大部分要求.
2. 看起来像Stack Overflow的编辑器.存在一些行为差异(见下文).
3. 建立在jQuery之上(并且不需要MooTools,这比其他严肃的竞争者mooWMD还要好).

我最终实现了自己显示/隐藏编辑框的功能,这在很大程度上证明是非常容易的.我没有用任何按钮扩展编辑器,我肯定会在其源代码中弄乱一些,但我认为这不会太大.

与Stack Overflow版本的差异

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

1. 单行输入行的结果导致a <br/>,而不是被视为一个段落.我碰巧喜欢这种方式,所以我对这种改变很好.
2. 编号列表是自动编号的,ala Microsoft Word.也就是说,Enter在写完"1. first item"之后点击将自动为您提供以"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事件注册该函数.