我们应该使用哪个堆栈溢出样式标记（WMD）JavaScript编辑器？ 背景

我正在开发一个需要用户输入内容的应用程序，我决定使用堆栈溢出样式的标记编辑器。在过去几天研究了这个主题之后，我意识到基本WMD编辑器有很多分支，有些具有一些基本的增强功能，有些与堆栈溢出编辑器有很大的不同

因为这将是应用程序的核心，所以我想从尽可能好的代码库开始。如果有人能推荐最适合我需要的众多解决方案，我会很高兴

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

---

我的项目的需求

• 现场预览
• 同一页面上有多个编辑器（我不知道有多少个，因为用户可以动态添加另一个编辑框）
• 能够扩展额外的按钮（我想要一个按钮来上传图片，而不是仅仅添加一个

  img

  URL）
• 能够动态显示/隐藏编辑框（并且仅查看预览框）
• 这不是绝对必须的，但我更喜欢尽可能接近Stack Overflow的外观，因为它是众所周知的
• 不知道这是否重要，但后端是用Django编写的

我看过的编辑 下面是我看过的一些代码库，以及一些想法。显然，我可能错过了另一个解决方案

• 版本。据我所知，这是官方的堆栈溢出版本。似乎它不支持一个页面上有多个编辑器
• 。看起来很好，但与堆栈溢出版本有很大不同
• 。现在看起来像是赢家，但我有点担心，因为它看起来没有MarkEdit那么活跃/可攻击
• 版本。不确定，看起来像一个没有太多用途的旧代码库
• 这个。看起来它不是供公众使用的

---

对于实时预览部分，该库非常容易使用（正如Edan指出的，它包含在代码库中）

您可以这样使用它（如果不想，不需要使用jQuery）

update#u description_preview函数使用converter对象读取#id#u description元素中的标记，并将其转储到#description preview元素中

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

---

最后一点是用keyup事件注册函数。

最后，在仔细查看了一个现成的编辑器之后，我选择了位于的OpenLibrary WMD端口

我选择这个编辑的原因

符合我的大部分要求

看起来像堆栈溢出的编辑器。有一些行为差异（见下文）

是在jQuery之上构建的（并且不需要，这是另一个重要竞争者的优势）

我最终实现了显示/隐藏editbox的功能，这在大多数情况下都非常简单。我没有用任何按钮扩展编辑器，我确信这需要在其源代码中进行一些修改，但我认为这不会太大

与堆栈溢出版本的差异 与堆栈溢出编辑器有一些区别：

行尾的单个输入会导致一个

，而不是一个段落。我碰巧更喜欢这种方式，所以我对这种变化没意见

编号列表是自动编号的，如Microsoft Word。也就是说，在写“1.first item”之后点击回车键会自动得到一个以“2”开头的行。这也是我非常喜欢的变化

嗯，我希望这能帮助任何想找类似编辑的人。如果我最终定制了编辑器，我会创建自己的分支（它是根据麻省理工学院许可证授权的），但现在我不用修改源代码就可以离开了。

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

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

---

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

不确定它是否完全符合旧的要求，但2014年提供的另一个解决方案是开放源代码标记编辑器，其预览版根据Apache 2.0授权，由topten软件创建

此处提供在线演示：

包括一个独立的javascript文件，用于将标记转换为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);

...
var reader=new stmd.DocParser（）；
var writer=new stmd.HtmlRenderer（）；
...
var parsed=reader.parse（“一些**标记**文本”）；
var result=writer.renderBlock（已解析）；

WMD（至少是StackOverflow版本）是否使用shodown.js进行转换？至少有一点我是这么理解的。忘记了决战包含在代码库中。我的上一个项目只是实时预览（手动输入标记语法，没有JS编辑器），所以我需要单独使用决战。问得好。我自己也在调查这个问题，到目前为止，我发现在derobins版本和其他版本的Chrome中，列表的自动缩进被打破了。SO版本似乎已经关闭了自动缩进功能，尽管我不确定是什么改变了它（doList仍然存在）。我相信我遇到了一个开源版本的正版工件。又找不到该死的东西了。嗨，我刚下载了openlibrary/wmd，但它似乎不起作用，它有问题

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