我应该使用哪个堆栈溢出样式的markdown(wmd)javascript编辑器?

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

我选择这个编辑的原因

1. 相遇 最 我的要求。
2. 看起来像堆栈溢出的编辑器。有一些行为差异(见下文)。
3. 是在jquery之上构建的(并且不需要 MooTools 这比其他重要的竞争者更有利, mooWMD )

我最终实现了显示/隐藏编辑框的功能,这在大多数情况下都很容易实现。我 没有 用任何按钮扩展编辑器,我确信这需要在它的源代码中进行一些混乱,但我认为这不会有什么大不了的。

与堆栈溢出版本的差异

与堆栈溢出编辑器有一些不同之处:

1. 在行尾单次进入会导致 <br/> 而不是一段。我正好喜欢这样,所以我对这个变化很满意。
2. 编号列表是自动编号的,ala-microsoft-word。也就是说,击球 进入 写完“1.第一项“将自动为您提供以“2”开头的行。这也是我真正喜欢的改变。

嗯,我希望这能帮助任何寻找类似编辑的人。如果我最终自定义了编辑器,我将创建自己的分支(它是在麻省理工的许可下获得许可的),但是现在我不用修改源代码就可以摆脱困境。

好吧,这个问题(和解决方案)已经很老了,所以我想也许我会在这里提出一些最新的东西。:)

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

还有一个替代方案叫做 Bootstrap-Markdown 也很有希望。

对于实时预览部分, Showdown 库非常容易使用(正如Edan指出的,它包含在代码库中)

您可以这样使用它(如果不想使用jquery,则不需要使用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();
    });
});

更新描述预览函数使用converter对象读取id描述元素中的标记,并将其转储到描述预览元素中。

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

最后一位只是在keyup事件中注册函数。

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

这里提供在线演示: http://www.toptensoftware.com/markdowndeep/dingus

Standard Common Markdown 包括一个独立的javascript文件,用于将标记转换为HTML。如官方所示,很容易实施 demo 或者这个 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);