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

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

具体而言，减价“所见即所得”被经常建议编辑器（如像帖此）在如下意义上不是纯WYSIWYG编辑器用户是静止写入原始降价（MarkItUp）或去另一个极端具有行而不编辑的标准控件（哈罗）。

我之间需要一些东西。

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

我知道Markdown / Wiki等的原因-它提供的安全性。我不介意像在SE此处那样输入原始代码，但是我的用户不是极客，所以觉得这很不愉快。他们不想看到* * * ___及其文本中混有空格。它们用于“ Word”样式编辑，并且在该环境中效率最高。

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

2015年9月23日更新

CKEditor现在具有Markdown 插件，可以执行此操作。addon项目托管在github上。

屏幕截图：

2015年4月13日更新
自称开发CKEditor的人说CommonMark的外观改变了游戏规则，我们可能会看到CKEditor的适当标记界面（请阅读全文）。

2015年2月6日更新

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

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

前几天，我在研究这个主题，但没有找到任何具有Markdown输出的“所见即所得”编辑器。实际上，首先您必须创建一个WYSIWG Markdown编辑器，即WYSIWG HTML编辑器，并且在市场上只有很少的可用。

您将有可能dataProcessor为CKEditor 创建将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支持。

可能是新手SimpleMDE。我一直在寻找这样的东西一个月了。令我惊讶的是，它在搜索结果中并未获得更高的排名。我必须经过有关le窃/编辑的通知才能找到此文件。

编辑2015年9月23日

CKEditor现在具有Markdown 插件，可以执行此操作。addon项目托管在github上。

屏幕截图：

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

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

编辑2015年4月13日：
自称开发CKEditor的人说CommonMark的出现改变了游戏规则，我们可能会看到CKEditor的适当标记界面（请阅读全文注释）。

Pen是一种新的（自2014年起生效）的所见即所得编辑器，其输出Markdown。
这不是完美的-我在此处粘贴HTML时遇到了问题-但它可以正常工作。

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

不过，我会把它留在这里作为选项，因为有人对此答案表示赞同，并且它可能已对某人有用。

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

我用了你好。我认为它的网站本身并不是Markdown所见即所得的编辑器，但该演示确实为实现这一目标铺平了道路。

Hallo允许在内对HTML进行所见即所得的编辑<div>。我使用javascript隐藏<textarea>了具有特定wysiwygCSS类的所有块，将其替换为，<div>然后将的内容复制<textarea>到中<div>。复制通过Showdown运行从Markdown生成HTML。

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

如果<textarea>是字段中的<form > >中，则提交该表单后，已编辑的Markdown将发送到服务器。

灵感来自Hallo Markdown示例，特别是editor.js文件。我将其与hallo.js，showdown.js和to-markdown.js一起用作自己脚本的基础。

我的脚本，wysiwyg.js是的衍生物editor.js内从喂降价实施例。需要注意的几点：

• 我在Rails应用程序中使用它（没关系）
• 因为Rails使用Turbolinks，所以它在上ready也可以在上运行page:load
• ajaxComplete之所以继续运行，是因为我将Ajax用于表单错误报告
• 还有其他的依赖关系：jQueryUI的和瘦长（Rails开发者可以利用宝石的jQuery UI的护栏和四肢瘦长形轨道）。
• 此外字体真棒用于工具栏图标。的版本hallo.js由所使用的演示是过时的（它使用的是旧版本的字体真棒） -使用从GitHub hallo.js代替。

您只需将CSS添加class='wysiwyg'到任何CSS 上<textarea>即可启用所见即所得。本<textarea>应conain降价格式的文本。

我希望wysiwyg.js可以很容易地改编为使用其他编辑器（如果您不喜欢Hallo），只要它可以在HTML中的HTML上运行<div>。有很多可供选择的选择，但并非都像Hallo一样轻巧。

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

我也在寻找此线程顶部描述的markdown编辑器

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

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

这似乎非常接近我们的期望，它在取得所见即所得的RTF文本并输出markdown方面做得很合理。但是，当我从Google文档粘贴一些富文本格式时，它在编码异常上失败了。