集成 Markdown 所见即所得文本编辑器

Posted 2023-02-16

【中文标题】集成 Markdown 所见即所得文本编辑器

【英文标题】：Integrated Markdown WYSIWYG text editor

【发布时间】：2012-10-02 03:38:01

【问题描述】：

在为 Markdown 代码寻找直接的 WYSIWYG 编辑器时，我没有找到与 CkEditor、TinyMCE 等类似的 UI。

具体来说，经常推荐的 Markdown “所见即所得” 编辑器（例如 this 之类的帖子）不是纯粹的所见即所得编辑器，因为用户要么仍然编写原始 Markdown（MarkItUp），要么走向另一个极端在没有标准控件的情况下进行内联编辑（Hallo）。

我需要一些介于两者之间的东西。

我正在寻找一个 Markdown 编辑器，它的外观和功能类似于精简的 CkEditor 文本框，并且可以接受和输出 Markdown。应该有一个带有最少一组格式选项（B、I、U、列表等）的工具栏，并且文本输入区域应该显示转换后的 Markdown，而不是原始代码。应该有一个 Source 按钮，允许用户编辑原始 Markdown，但即使这样也是可选的。例如：

我知道 Markdown/wiki 等的原因 - 它提供的安全性。我不介意在 SE 输入像这里这样的原始代码，但我的用户不是极客，也不觉得这很有趣。他们不想看到 * * * ___ 和空格与他们的文本混合。他们习惯于“Word”风格的编辑，并且在那种环境下效率最高。

那么 - Markdown 是否有真正集成的所见即所得编辑器？我正在用 php 编写，所以我可以用类调用的东西会很完美。

---

2015 年 9 月 23 日更新

CKEditor 现在有一个 Markdown addon 可以做到这一点。插件项目是hosted on github。

截图：

---

2015 年 4 月 13 日更新 自称开发CKEditor 的人说CommonMark 的出现改变了游戏规则，我们可能会看到一个合适的markup interface for CKEditor（阅读cmets 了解全文）。

---

2015 年 2 月 6 日更新

CKEditor 现在带有一个输出（并接受作为输入）BBCode 的插件。

演示：http://ckeditor.com/demo#bbcode

【问题讨论】：

Ahola 编辑器，as suggested in this answer 您链接到的 SO 问题是一个 html5 WYSIWYG 编辑器，它似乎完全符合您的要求。它甚至还有 Office 功能区的提示。你打折是有原因的吗？

恐怕我无法真正理解您的最后评论。 Ahola 是“就地编辑”，所有所见即所得的编辑器也是如此。 Aholda 编辑框只是一个div，工具栏是另一个div，这些可能是页面上唯一的东西。 Ahola 解决方案满足您对“最小格式选项集（B、I、U、列表等）的要求，并且文本输入区域应显示转换后的 Markdown，而不是原始代码。”请您更清楚地解释为什么这不是您将考虑的解决方案。

Markdown 自行替换了所有这些所见即所得的编辑器。为什么需要输出markdown？

@Pol：因为与 HTML 相比，以后存储和显示是安全的？

我也没有收到这个问题。要么使用 Markdown 生成 HTML，要么使用 WYSIWYG 编辑器生成 HTML。为什么要使用 WYSIWYG 编辑器来生成 Markdown？如果这确实是您想要的，您可以随时使用 CKeditor 并将 HTML 转换为 Markdown。

【参考方案1】：

SimpleMDE，一个新人，或许就是答案。我一直在寻找这样的东西一个月了。我很惊讶这并没有在搜索结果中显示得更高。我必须通过lepture/editor 上的通知才能找到这个。

【讨论】：

哇，谢谢分享——这正是我想要的。太棒了！

谢谢HNL，这里也是。

这不是真正的所见即所得。它将降价混合到编辑器窗口中。这个问题所寻求的是一个编辑器，它在单独的视图中显示完成的视图和源代码（工具栏上有一个“源”按钮，用于坐立不安）。

【参考方案2】：

前几天我正在研究这个主题，但我没有找到任何具有 Markdown 输出的像样的 WYSIWYG 编辑器。事实上，首先你必须要创建一个 WYSIWG Markdown 编辑器，即 WYSIWG HTML 编辑器，而市场上可用的很少。

您有机会为 CKEditor 创建 dataProcessor，这会将 HTML 编辑器更改为 Markdown 编辑器。我们有一个这样的 BBCode 插件（查看http://nightly-v4.ckeditor.com/3737/samples/bbcode.html）。

你所要做的就是实现这个接口http://nightly-v4.ckeditor.com/ckeditor_api/#!/api/CKEDITOR.dataProcessor。如果您检查 BBCode 插件的代码，您会看到一些 hacks 和技巧，因为不幸的是当前 CKEditor 的架构还没有准备好（还）创建这样的数据处理器。但是，我相信如果您只想提供几个样式选项，您应该能够很快实现 Markdown 支持。

【参考方案3】：

2015 年 9 月 23 日编辑

CKEditor 现在有一个 Markdown addon 可以做到这一点。插件项目是hosted on github。

截图：

---

正如我在 2015 年 2 月 6 日更新中所发布的，CKEditor 现在包含允许 BBCode 输入和输出的插件。

此处提供演示：http://ckeditor.com/demo#bbcode

2015 年 4 月 13 日编辑： 自称开发CKEditor 的人说CommonMark 的出现改变了游戏规则，我们可能会看到一个合适的markup interface for CKEditor（阅读cmets 了解全文）。

【讨论】：

“这完全一样吗？”根据插件的共同点，ckeditor仍然输出HTML而不是Markdown。

【参考方案4】：

Pen 是一个新的（自 2014 年起有效）所见即所得的编辑器，它输出 Markdown。 它并不完美——我在粘贴 HTML 时遇到了问题——但它可以工作。

编辑：对不起！ 不输出Markdown。Walery Strauch在cmets中指出我看到的Markdown格式化标志其实是CSS伪元素规则：

不过，我还是把它留在这里作为一个选项，因为有些人赞成这个答案，而且它可能对某人有用。

【讨论】：

笔演示是就地编辑的，而不是 OP（我）曾经/感兴趣的东西。现在没时间安装了。有传统的文本框选项吗？

@Acoder：我的错！我没有意识到你想要一个固定的工具栏。 Halo 有什么问题呢？它现在确实有一个工具栏..

这个截图中仍然是css布局。我想获取markdown数据（看我的截图i.imgur.com/fM4jFl2.png）

@WaleryStrauch 哇，我真的很愚蠢。我没有意识到这不是真正的输出。很抱歉浪费您的时间！我会更新答案。

..它现在似乎至少支持输出 Markdown。

【参考方案5】：

我实现了一个非常简单的编辑器，它允许以所见即所得的方式编辑包含 Markdown 的 <textarea> 的内容。

我使用了Hallo。我不认为它的网站表明它本身不是 Markdown WYSIWYG 编辑器，但 demo 确实开辟了通往其中的道路。

Hallo 允许在<div> 中对 HTML 进行 WYSIWYG 编辑。我使用 javascript 隐藏任何具有特定 wysiwyg CSS 类的 <textarea> 块，将其替换为 <div> 并将 <textarea> 的内容复制到 <div> 中。复制通过 Showdown 从 Markdown 生成 HTML。

每次<div> 内容发生变化时，另一个 Javascript 例程都会做出反应。它将内容复制回（现已隐藏）<textarea>。内容通过to-markdown运行从HTML转换为Markdown。

如果<textarea> 是<form 中的一个字段，那么在提交该表单时，编辑后的 ​​Markdown 将被发送到服务器。

这个灵感来自Hallo Markdown Example，特别是editor.js 文件。我用它作为my own script 以及hallo.js、showdown.js 和to-markdown.js 的基础。

我的脚本wysiwyg.js 是editor.js 从Hallo Markdown Example 的派生词。需要注意的几点：

我在 Rails 应用程序中使用它（没那么重要） 它在ready 和page:load 上运行，后者是因为Rails 使用Turbolinks 它在ajaxComplete 上运行，因为我使用 Ajax 进行表单错误报告 还有其他依赖项：JQueryUI 和 Rangy（Rails 用户可以使用 gems jquery-ui-rails 和 rangy-rails）。 Font Awesome 也用于工具栏图标。 demo 使用的 hallo.js 版本已过期（它使用旧版本的 Font Awesome） - 请改用 hallo.js from GitHub。

您只需将 CSS class='wysiwyg' 添加到任何 <textarea> 即可启用所见即所得。 <textarea> 应该包含 Markdown 格式的文本。

如果您不喜欢Hallo，我希望wysiwyg.js 可以很容易地适应使用另一个编辑器，只要它适用于<div> 中的HTML。有很多可供选择，但并非所有都像 Hallo 一样轻量级。

我发现的一个 smilar 作品是 markdown-html-form。它使用相同的Showdown 和to-markdown。

【讨论】：

嘿@starfry，我尝试使用您的wysiwyg.js 重现您在上面描述的内容，但没有取得任何巨大的成功。想知道您是否也将随附的 HTML 隐藏在某个要点中？依赖的稳定版本列表等？谢谢！

@Jameson 我在gist 中添加了一些注释。我希望他们有所帮助！如果您有任何问题，请随时在要点中添加评论。

【参考方案6】：

我也在寻找这个帖子顶部描述的降价编辑器

你见过“降价工具”吗：http://md-wysiwyg.sourceforge.net/

演示：http://md-wysiwyg.sourceforge.net/cgi-bin/cgi_wysiwyg_test.py/

这似乎与我们正在寻找的非常接近，它在获取所见即所得的富文本和输出降价方面做得很合理。但是，当我从谷歌文档中粘贴一些富文本时，它因编码异常而失败。

【讨论】：

这个源代码显示的是HTML而不是markdown。

【参考方案7】：

我发现了两个目前似乎很流行，活跃且免费但尚未提及的。

第一个是Toast UI Editor。它支持两种模式（WYSIWYG 和 raw）。它有官方的 react 和 vuejs 包装器。

第二个是ProseMirror，它自称是“在网络上构建富文本编辑器的工具包”，它似乎非常灵活和广泛。它还支持both modes。

我很确定也可以找到可靠的非官方 react/vue/angular 包装器。