WMD markdown 编辑器 - HTML 到 Markdown 的转换答案

【问题标题】：WMD markdown editor - HTML to Markdown conversionWMD markdown 编辑器 - HTML 到 Markdown 的转换
【发布时间】：2010-11-14 20:43:55
【问题描述】：

我在一个项目中使用wmd markdown 编辑器，有一个问题：

当我发布包含降价文本区域的表单时，它（如预期的那样）将 html 发布到服务器。但是，说服务器端验证失败，我需要将用户发送回去编辑他们的条目，是否有办法只用降价而不是 html 重新填充文本区域？由于我已经设置好了，服务器只能访问帖子数据（以 html 的形式），所以我似乎想不出一种方法来做到这一点。有任何想法吗？最好是基于非 JavaScript 的解决方案。

更新：我找到了一个名为 markdownify 的 html 到 markdown 转换器。我想这可能是向用户显示降价的最佳解决方案......欢迎任何更好的选择！

更新 2： 我在 SO 上找到了 this 帖子，我猜有一个选项可以将数据作为 markdown 而不是 html 发送到服务器。简单地将数据作为降价存储在数据库中是否有任何缺点？将它显示给用户（在编辑器之外）怎么样？也许最好将两个版本（html和markdown）都发布到服务器......

已解决：我可以简单地使用php markdown 将markdown 转换为html 服务器端。

【问题讨论】：

标签： php javascript markdown wmd

【解决方案1】：

我建议您只需将文本发送并存储为 Markdown。这似乎是你已经解决的问题。 IMO，将文本存储为 Markdown 会更好，因为您可以安全地删除所有 HTML 标记而不必担心格式丢失 - 这使您的代码更安全，因为使用 XSS 攻击将更加困难（尽管它可能仍然是可能的） - 我只是说这部分会更安全er）。

【讨论】：

如果文本中包含 HTML 示例，剥离所有 HTML 标记是否会导致问题？
或许可以，但接下来只需要确保不要从代码块中剥离任何标签。
只需对它进行 HTML 编码。我不认为任何降价字符都是保留的 html。
@MattDotson：块引用 (> some text) 是冲突的，链接 URL 也可能被尖括号包围 (<http://example.com>)。将输入清理与 Markdown 处理分开可能更安全/更明智。
还应该注意的是，根据the official documentation，代码块内容将由符合标准的解析器自动进行HTML编码。

【解决方案2】：

需要考虑的一点是，WMD 似乎与某些服务器端 Markdown 实现有某些不同的边缘情况。我确实在这里的预览中看到了一些在提交后出现不同的怪癖（我相信一个这样的案例是试图逃避被反引号包围的反引号）。通过网络发送转换后的预览，您可以确保预览准确无误。

我并不是说你应该做出决定，但这是需要考虑的事情。

【讨论】：

【解决方案3】：

试用 Pandoc。它比 Markdownify 更全面、更可靠。

【讨论】：

【解决方案4】：

您看到的 HTML 只是一个预览，因此将其存储在数据库中并不是一个好主意，因为您在尝试编辑时会遇到问题。存储两个版本（markdown 和 HTML）也不是一个好主意，因为 HTML 只是一种解释，您在编辑和保持两个版本同步时会遇到同样的问题。

所以最好的办法是将markdown存储在数据库中，然后在显示之前将其转换为服务器端。

您可以为此目的使用PHP Markdown。然而，这并不是您在 javascript 端看到的 100% 完美转换，可能需要一些调整。

Stack Exchange network 使用的版本是 C# 实现，应该有你下载的带有 wmd 版本的 python 实现。

我调整的一件事是新行的呈现方式，所以我在 markdown.php 中进行了更改，以从我拥有的版本的第 626 行开始将一些新行转换为 <br>：

var $span_gamut = array(
#
# These are all the transformations that occur *within* block-level
# tags like paragraphs, headers, and list items.
#
    # Process character escapes, code spans, and inline HTML
    # in one shot.
    "parseSpan"           => -30,

    # Process anchor and image tags. Images must come first,
    # because ![foo][f] looks like an anchor.
    "doImages"            =>  10,
    "doAnchors"           =>  20,
    
    # Make links out of things like `<http://example.com/>`
    # Must come after doAnchors, because you can use < and >
    # delimiters in inline links like [this](<url>).
    "doAutoLinks"         =>  30,
    "encodeAmpsAndAngles" =>  40,

    "doItalicsAndBold"    =>  50,
    "doHardBreaks"        =>  60,
    "doNewLines"          =>  70,
    );

function runSpanGamut($text) {
#
# Run span gamut tranformations.
#
    foreach ($this->span_gamut as $method => $priority) {
        $text = $this->$method($text);
    }

    return $text;
}

function doNewLines($text) {
    return nl2br($text);
}

【讨论】：