我应该使用哪种堆栈溢出式降价(WMD)JavaScript编辑器?

背景

我正在开发一个需要用户input内容的应用程序,而且我决定使用Stack Overflow风格的Markdown编辑器。 在过去几天研究这个话题后,我意识到基本的WMD编辑器有很多的分支,有些基本的增强和一些与Stack Overflow有很大的不同。

由于这将是应用程序的核心,我想从最好的代码库开始。 如果有人能推荐出最适合我的需求的解决scheme之一,我会很高兴。

以下是要求,加上我已经设法find。 我希望这个问题能够帮助我决定使用哪个版本,或者帮助我发现一个更适合我需求的端口。


我的项目的要求

  • 实时预览
  • 多个编辑器在同一页面上(我不知道提前多less次,因为用户可以dynamic添加另一个编辑框)。
  • 能够扩展额外的button(我想要一个button来上传图片,而不是只是添加一个imgurl)。
  • 能够dynamic显示/隐藏编辑框(只能看预览框)。
  • 不是绝对必须的,但我更愿意贴近Stack Overflow的外观和感觉,因为它是众所周知的。
  • 不知道这是否重要,但是后端是用Django编写的。

我看过的编辑

以下是我看过的一些代码库,包含了一些想法。 显然,我可能会错过另一个解决scheme。

  • derobins版本。 从我可以告诉,这是官方的堆栈溢出版本。 似乎不支持在一个页面上的多个编辑器。
  • jQuery.MarkEdit 。 看起来非常好,但是与Stack Overflow版本非常不同。
  • MooWMD 。 看起来像是现在的赢家,但我有点担心,因为它看起来不如MarkEdit活跃/ hackable。
  • wmd新版本。 不确定,看起来像没有太多用处的旧代码库。
  • 社交网站分支 。 好像不是供公众使用的。

最后,在为现成的编辑器寻找更多东西之后,我决定使用位于http://github.com/openlibrary/wmd的OpenLibrary WMD端口。

我select这个编辑的原因

  1. 满足我的大部分要求。
  2. 看起来像Stack Overflow的编辑器。 有一些行为差异(见下文)。
  3. build立在jQuery之上(不需要MooTools ,这比其他严肃的竞争者mooWMD更加优秀 )。

我最终实现了显示/隐藏编辑框的function,这在大多数情况下certificate是非常简单的。 我还没有将编辑器扩展到任何button,我相信这些button在源头上会有些混乱,但我认为这不会太大。

与堆栈溢出版本的区别

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

  1. 单行进入行末会导致一个<br/>而不是被认为是一个段落。 我碰巧喜欢这样,所以我对这个改变很好。
  2. 编号列表是自动编号,Microsoft Word。 也就是说,在写入“1.第一项”之后, 按Enter键会自动给你一个以“2”开头的行。 这也是我真正喜欢的改变。

那么,我希望这可以帮助任何人寻找一个类似的编辑器。 如果我最终定制了编辑器,我会创build自己的分支(它是根据MIT许可证授权的),但是现在我不用修改源代码就可以离开了。

那么,这个问题(和解决scheme)变得越来越老了,所以我想也许我会把这里的东西放在这里。 🙂

这是2014年的开始,当我遇到同样的问题时,我最终使用了PageDown-Bootstrap 。 这是一个基于Twitter Bootstrap的WMD编辑器,具有完全可定制的样式栏(button栏)。

还有一个叫做Bootstrap-Markdown的替代scheme,看起来也很有前景。

对于实时预览部分, 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元素中的降价,并将其转储到#description-preview元素中。

在这里,我定义了初始化预览窗口之后调用该函数(在编辑器中预先加载了一些文本)

最后一点只是注册与keyup事件的function。

不确定它是否完全符合旧的要求,但2014年提供的另一个解决scheme是开放源代码Markdown编辑器,预览许可在Apache 2.0下,并由topten软件创build。

在线演示可以在这里find: http : //www.toptensoftware.com/markdowndeep/dingus

标准通用Markdown包含一个独立的JavaScript文件,将markdown转换为html。 这很容易实现,正如在官方演示或这个笨蛋所示 。

大致:

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