62

背景

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

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

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

我的项目的要求

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

我看过的编辑器

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

  • 德罗宾版本。据我所知，这是 Stack Overflow 的官方版本。似乎它不支持一页上的多个编辑器。
  • jQuery.MarkEdit。看起来很不错，但与 Stack Overflow 版本有很大不同。
  • 哞哞WMD。现在看起来像赢家，但我有点担心，因为它看起来不像 MarkEdit 那样活跃/可破解。
  • wmd-新版本。不确定，看起来像一个没有太多用处的旧代码库。
  • SocialSite分支。好像不适合公众使用。
4

5 回答 5

27

最后，在四处寻找现成的编辑器后，我选择了位于http://github.com/openlibrary/wmd的 OpenLibrary WMD 端口。

我选择这个编辑器的原因

  1. 满足我的大部分要求。
  2. 看起来像 Stack Overflow 的编辑器。有一些行为差异（见下文）。
  3. 建立在 jQuery 之上（并且不需要MooTools，这比另一个重要的竞争者mooWMD 更胜一筹）。

我最终实现了自己显示/隐藏编辑框的功能，这在大多数情况下被证明非常容易。我没有用任何按钮扩展编辑器，我敢肯定它的源代码需要一些混乱，但我认为这没什么大不了的。

与 Stack Overflow 版本的区别

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

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

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

于 2010-05-28T23:11:21.483 回答
7

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

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

还有一种称为Bootstrap-Markdown的替代方法，它看起来也很有前途。

于 2014-02-20T17:26:56.853 回答
5

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

于 2010-05-21T18:21:28.067 回答
1

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

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

于 2014-04-18T16:35:57.460 回答
0

Standard Common 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);
于 2014-09-04T21:52:32.040 回答