我应该使用哪种堆栈溢出风格的降标（WMD）JavaScript编辑器？

StackOverflow https://stackoverflow.com/questions/2874646

题

背景

我正在研究一个需要用户输入内容的应用程序，并且我决定使用堆栈溢出风格的Markdown编辑器。在过去几天研究了这个主题之后，我意识到基本WMD编辑器有许多叉子，有些具有一些基本的增强功能，有些与堆栈溢出有很大差异。

由于这将是应用程序的核心，因此我想从我可以的最佳代码库开始。如果有人可以推荐许多解决方案中的哪种最适合我的需求，我会很高兴。

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

我项目的要求

  • 实时预览
  • 同一页面上的多个编辑器（我不知道提前多少，因为用户可以动态添加另一个编辑框）。
  • 能够使用额外的按钮扩展（我希望一个按钮上传图片，而不仅仅是添加 img URL）。
  • 能够动态显示/隐藏编辑框的能力（仅参见预览框）。
  • 这不是绝对的，但是我更喜欢坚持靠近Stack Overflow的外观和感觉，因为它是众所周知的。
  • 不知道这是否重要，但是后端是用Django写的。

我看过的编辑

这是我看过的一些代码库，并带有想法。显然，我可能缺少另一个解决方案。

  • 这 od蛋白 版本。据我所知，这是官方的堆栈溢出版本。似乎它不支持一页上的多个编辑器。
  • jQuery.markedit. 。看起来非常好，但与堆栈溢出版本完全不同。
  • Moowmd. 。看起来现在是获胜者，但是我有点担心，因为它看起来不如Markedit活跃/黑客入侵。
  • 这 WMD新 版本。不确定，看起来像旧的代码库，没有太多使用。
  • 这 社会石分支. 。似乎不是公众使用。
有帮助吗？

解决方案

最后，在更多地环顾了现成的编辑器之后，我定居在OpenLibrary WMD端口，位于 http://github.com/openlibrary/wmd.

我选择这个编辑的原因

  1. 见面 最多 我的要求。
  2. 看起来像Stack Overflow的编辑器。有一些行为差异（见下文）。
  3. 是在jQuery顶部建造的（并且不需要 mootools, ，这是比其他严重竞争者的加号 Moowmd).

我最终实现了自己显示/隐藏编辑框的功能，这在大多数情况下都很容易。一世 没有 用任何按钮扩展了编辑器，我敢肯定，它需要在其源头上乱七八糟，但我认为这不会太大。

与堆栈溢出版本的区别

与堆栈溢出编辑器有一些区别：

  1. 单线进入线的末端导致 <br/>, ，而不是被视为一段。我碰巧喜欢这种方式，所以我对此更改很好。
  2. 编号列表是自动编号的，Ala Microsoft Word。也就是说 进入 在编写“ 1.第一项”之后，将自动为您提供以“ 2.”开头的行。这也是我非常喜欢的变化。

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

其他提示

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

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

还有一个叫做 Bootstrap-Markdown, ，看起来也很有希望。

对于实时预览部分， 摊牌 图书馆很容易使用（正如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元素中。

在这里，我在定义该功能以初始化预览窗口后立即调用该函数（编辑器中有一些文本）

最后一个位只是在键盘事件中注册该功能。

不确定它是否完全适合旧要求，但是2014年可用的另一个解决方案是带有Apache 2.0许可并由Topten软件创建的预览的开源Markdown编辑器。

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

标准 常见的降价 包括一个独立的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);
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top