集成Markdown WYSIWYG文本编辑器

Question

在为Markdown代码寻找简单的WYSIWYG编辑器时，我找不到与CkEditor，TinyMCE等相比较的UI。

具体来说，经常推荐的Markdown“WYSIWYG”编辑器（例如像this这样的帖子）并不是纯粹的WYSIWYG编辑器，因为用户仍然可以写下原始Markdown（MarkItUp）或者去在没有标准控件的情况下进行内联编辑的另一个极端（Hallo）。

我需要介于两者之间。

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

我明白了Markdown / wiki等的原因 - 它提供的安全性。我不介意在SE输入原始代码，但我的用户不是极客，也不觉得这很有趣。他们不希望看到* * * ___和与其文本混合的空格。它们用于“Word”样式编辑，并且在该环境中效率最高。

那么 - Markdown是否有真正集成的WYSIWYG编辑器？我正在用PHP编写，所以我可以用类调用的东西是完美的。

---

2015年9月23日更新

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

截图：

---

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

---

2015年2月6日更新

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

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

Answer 1

SimpleMDE，一个新人，可能就是答案。我现在一直在寻找这样的东西一个月。我很惊讶这在搜索结果中没有显示出来。我必须通过lepture/editor通知才能找到这个。

Answer 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插件的代码，你会看到一些黑客和技巧，因为不幸的是，目前CKEditor的架构尚未准备好（尚）创建这样的数据处理器。但是，我相信如果您只想提供几个样式选项，您应该能够很快实现Markdown支持。

Answer 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（阅读全文的评论）。

Answer 4

Pen 是一个新的（自2014年起生效）WYSIWYG编辑器，输出Markdown 。
它并不完美 - 我在那里粘贴HTML有问题 - 但它确实有用。

  编辑：对不起！ 它没有输出Markdown。 Walery Strauch在评论中指出我看到的Markdown格式符号实际上是CSS伪元素规则：

     

     

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

Answer 5

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

我使用了Hallo。我不认为它的网站显然它本身不是Markdown WYSIWYG编辑器，但是demo确实打造了一条路径。

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

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

如果<textarea>是<form＆gt;中的字段，则在提交该表单时，已编辑的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用户可以使用宝石jquery-ui-rails和rangy-rails）。
• 此外，Font Awesome用于工具栏图标。 demo使用的hallo.js版本已过期（它使用旧版Font Awesome） - 请改用hallo.js from GitHub。

您只需要向任何class='wysiwyg'添加CSS <textarea>即可在其上启用WYSIWYG。 <textarea>应该使用Markdown格式的文本。

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

我发现的一项微妙的工作是markdown-html-form。它使用相同的Showdown和to-markdown。

Answer 6

我也在寻找这个主题

顶部描述的降价编辑器

您是否看过“降价工具”：http://md-wysiwyg.sourceforge.net/

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

这看起来非常接近我们正在寻找的东西，它可以合理地获取您的WYSIWYG富文本并输出降价。但是，当我粘贴来自谷歌文档的一些富文本时，它在编码异常时失败。

Answer 7

我发现了两个目前似乎很受欢迎、活跃且免费但尚未提及的两个。

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

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

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