logo标签列表

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

ckeditorrichtextboxmarkdownwysiwyg
107
在寻找一个简单的所见即所得的Markdown代码编辑器时，我发现没有与CkEditor、TinyMCE等相媲美的用户界面。
具体来说，通常推荐的Markdown“所见即所得”编辑器（例如像this这样的帖子）在某种程度上并不是纯粹的所见即所得编辑器，因为用户要么仍然编写原始的Markdown代码（MarkItUp），要么过于极端地进行内联编辑而没有标准控件（Hallo）。
我需要介于两者之间的东西。
我正在寻找一个看起来和功能类似于精简版CkEditor文本框的Markdown编辑器，并且能够接受和输出Markdown。工具栏应该有一组最少的格式选项（加粗、斜体、下划线、列表等），文本输入区域应该显示转换后的Markdown，而不是原始代码。还应该有一个源代码按钮，允许用户编辑原始的Markdown代码，但这甚至是可选的。例如：

enter image description here

我理解Markdown / wiki等的原因 - 它提供的安全性。我不介意像在SE这里一样输入原始代码，但我的用户不是极客，他们不觉得这样有趣。他们不想在他们的文本中看到* * * ___和空格混在一起。他们习惯于“Word”样式的编辑，并且在那种环境下最有效率。
那么 - 是否有一个真正集成的所见即所得（WYSIWYG）Markdown编辑器？我正在用PHP编写，所以一个可以通过类调用的东西会很完美。

2015年9月23日更新

CKEditor现在有一个Markdown的addon，可以做到这一点。这个插件项目托管在github上。

截图：

markdown WYSIWYG

markdown source

2015年4月13日更新
有人声称正在开发CKEditor的人表示，CommonMark的出现是一个改变游戏规则的因素，我们可能会看到一个适合CKEditor的标记界面（请阅读评论以了解完整故事）。

2015年2月6日更新

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

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

Ahola是一种原地编辑技术。请查看我发布的图片 - 我们需要一个静态框，具有有限的格式选项，并在专用编辑页面上显示（比仅有此文本框更多的选项）。如果用户需要编辑其他非文本区域，则在EIP一个文本位之后仍需转到另一个部分，这将会让他们感到困惑。在我们的环境中，使用专用编辑框效果更好。 - a coder
1
很抱歉，我无法真正理解您最后一条评论的意思。Ahola是“原地编辑”，所有所见即所得编辑器都是如此。Aholda编辑框只是一个div，工具栏是另一个div，它们可能是页面上唯一的东西。Ahola解决方案符合您对“最少的格式选项（B、I、U、列表等），文本输入区域应显示转换后的Markdown而不是原始代码”的要求。请问您能否更清楚地解释为什么这不是您考虑的解决方案。 - Chris
1
Markdown通过自身替换了所有这些所见即所得的编辑器。你为什么需要输出markdown呢？ - Pol
4
@Pol: 因为相对于HTML，它更安全地存储和显示，对吗？ - Dan Abramov
1
我也不理解这个问题。你可以使用Markdown生成HTML，也可以使用所见即所得编辑器生成HTML。为什么要使用所见即所得编辑器来生成Markdown呢？如果这真的是你想要的，你可以使用CKeditor并将HTML转换为Markdown。 - mb21
显示剩余5条评论
8个回答
32

SimpleMDE可能是您需要的新工具。我已经搜索了一个月类似的东西，这个工具非常适合我的需求。但我很惊讶它在搜索结果中排名不高。我不得不通过 lepture / editor 上的通知才找到它。

enter image description here

1
哇，谢谢你分享这个——这正是我在寻找的。太棒了！ - Jared White
1
谢谢HNL，我也是。 - Melvin
5
尽管它不是真正的所见即所得，但它将Markdown与编辑器窗口混合在一起。这个问题中寻求的是一种编辑器，可以在单独的视图中显示完成的视图和源代码（并带有工具栏上的“源”按钮，以进行微调）。 - a coder
15
我前几天在研究这个主题，但我没有找到任何好的所见即所得Markdown输出编辑器。事实上，您需要先创建一个所见即所得HTML编辑器才能创建WYSIWG Markdown编辑器，并且市场上可用的只有一些。
你可以尝试为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支持。
11

2015年9月23日更新：

现在CKEditor已经有一个Markdown插件（addon），可以直接实现这个功能。该插件项目托管在github上。

截图如下：

markdown所见即所得

markdown源代码

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

一个演示例子在这里：http://ckeditor.com/demo#bbcode

2015年4月13日更新：
一位声称开发CKEditor的人说，CommonMark的出现是一个改变游戏规则的事件，我们可能会看到一个适合CKEditor的适当标记界面（阅读评论以了解更多详情）。

这个确切的事情可以做到吗？根据插件的评论，使用此插件仍然会输出HTML而不是Markdown。 - user764754
8

Pen 是一个新的所见即所得编辑器（截至2014年），可以用于IT技术相关内容的编辑。它不是完美的——我曾经在那里粘贴HTML时遇到了问题——但它可以使用。

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

尽管如此，我会将其作为一种选项留在这里，因为有些人赞同了这个答案，它可能对某些人有用。

笔演示是原地编辑，不是OP（我）感兴趣的。现在没有时间安装。有传统文本框选项吗？ - a coder
@Acoder：我的错！我没有意识到你想要一个固定的工具栏。不过，Halo 有什么问题呢？它现在已经有一个工具栏了。 - Dan Abramov
2
这张屏幕截图仍然是 CSS 布局。我想获取 Markdown 数据（请看我的屏幕截图 http://i.imgur.com/fM4jFl2.png）。 - Walery Strauch
1
@WaleryStrauch 哇，我真的很愚蠢。我没有意识到那不是真正的输出。对不起浪费了你的时间！我会更新答案。 - Dan Abramov
3
现在它似乎至少具备了输出 Markdown 的测试版支持。 - pjz
显示剩余4条评论
4
我实现了一个非常简单的编辑器，可以以所见即所得的方式编辑包含Markdown的<textarea>的内容。
我使用了Hallo。我认为它的网站并没有明确表明它本身不是一个Markdown WYSIWYG编辑器，但演示确实铺平了一条道路。 Hallo允许WYSIWYG编辑<div>内的HTML。我使用javascript隐藏任何具有特定wysiwyg CSS类的<textarea>块，将其替换为一个<div>并将<textarea>的内容复制到<div>中。复制通过Showdown运行，从Markdown生成HTML。
另一个JavaScript例程会在每次
内容更改时做出反应。它将内容复制回（现在隐藏的）
嘿@starfry，我尝试使用你的wysiwyg.js来重现你上面描述的内容，但并没有取得太大的成功。不知道你是否在gist中存储了相应的HTML文件？还有稳定版本的依赖项列表等等？谢谢！ - Jameson
1
@Jameson，我已经在我的gist中添加了一些注释。希望它们能有所帮助！如果你有任何问题，请随时在gist中添加评论。 - starfry
3
这个的源代码显示的是HTML而不是Markdown。 - a coder
1

我发现目前有两个非常受欢迎、活跃且免费的编辑器，但尚未被提及。

第一个是Toast UI Editor。它支持WYSIWYG和原始模式，并有官方的React和Vuejs包装器。

Toast UI

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

我相信也可以找到稳定的非官方React / Vue / Angular 封装。

ProseMirror

0

我研究了所见即所得编辑器并创建了一个博客，也许这可以帮助到你。 博客

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接