106

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

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

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

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

在此处输入图像描述

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

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

2015 年 9 月 23 日更新

CKEditor 现在有一个Markdown 插件来做这件事。插件项目托管在 github 上。

截图：

降价所见即所得

降价源

2015 年 4 月 13 日更新
自称开发 CKEditor 的人说CommonMark的出现改变了游戏规则，我们可能会看到CKEditor 的正确标记界面（阅读完整故事的评论）。

2015 年 2 月 6 日更新

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

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

4

7 回答 7

31

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

在此处输入图像描述

于 2015-09-12T06:53:56.693 回答
15

前几天我正在研究这个主题，但我没有找到任何具有 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 插件的代码，您会看到一些 hacks 和技巧，因为不幸的是当前 CKEditor 的架构还没有准备好（还）创建这样的数据处理器。但是，我相信如果您只想提供几个样式选项，您应该能够很快实现 Markdown 支持。

于 2012-11-05T20:42:18.067 回答
10

编辑 2015 年 9 月 23 日

CKEditor 现在有一个Markdown 插件来做这件事。插件项目托管在 github 上。

截图：

降价所见即所得

降价源

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

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

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

于 2015-02-06T19:08:53.243 回答
8

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

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

尽管如此，我还是把它留在这里作为一个选项，因为有些人赞成这个答案，它可能对某人有用。

于 2014-03-10T19:08:42.980 回答
4

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

我用过你好。我不认为它的网站表明它本身不是一个 Markdown WYSIWYG 编辑器，但该演示确实为它开辟了道路。

Hallo允许在<div>. 我使用 javascript 隐藏任何<textarea>具有特定wysiwygCSS 类的块，将其替换为 a<div>并将其内容复制<textarea>到<div>. 复制通过Showdown运行，它从 Markdown 生成 HTML。

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

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

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

我的脚本wysiwyg.js是来自Hallo Markdown Example的editor.js的衍生版本。需要注意的几点：

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

您只需将 CSS 添加class='wysiwyg'到 any<textarea>即可在其上启用 WYSIWYG。<textarea>应该包含 Markdown 格式的文本。

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

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

于 2015-11-07T16:26:03.653 回答
3

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

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

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

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

于 2013-07-02T16:43:21.763 回答
0

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

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

吐司界面

第二个是ProseMirror，它自称是“在 Web 上构建富文本编辑器的工具包”，它似乎非常灵活和广泛。它还支持这两种模式。

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

散文镜

于 2021-08-05T23:41:45.567 回答