Markdown 所见即所得的编辑器和预览在同一个 Textarea [关闭]答案

【问题标题】：Markdown wysiwyg Editor and Preview in same Textarea [closed]Markdown 所见即所得的编辑器和预览在同一个 Textarea [关闭]
【发布时间】：2013-05-28 15:56:17
【问题描述】：

我搜索了一个编辑器来编写 Markdown 语法并在同一个文本区域中预览，例如 Bootstrap WYSIHTML5 用于 html。

我不喜欢额外的预览。附加元素中的预览有很多脚本，我可以在网上找到。但对我来说很重要的是，edit 元素也是 view 元素，用 markdown 编写和查看。也许hallo.js 很棒，但我认为它不适用于 textarea 元素。也很好，我可以使用一个小的解决方案，而不是为了一小部分按钮和功能而过大。 textarea 对我来说也很重要，为什么用户会在 php 中使用 send post 保存，也不需要 Javascript。目标是一个简单的笔记，写markdown，或者使用按钮来格式化并且只看到格式化的内容以便于阅读。

提示：我已阅读 question #1 和 question #2，但只有 CK Editor 和 Aloha 是解决方案。两个不错的项目，但对我的小需求来说非常大。

非常感谢您的宝贵时间。

【问题讨论】：

使用网络技术：CodeMirror 是支持可变大小字体codemirror.net/demo/variableheight.html 和小部件的 JS 语法高亮编辑器，因此大多数实现都基于此。 simplemde.com，github.com/laobubu/HyperMD，桌面编辑器（电子），如abricotine.brrd.fr，zettlr.com。 CodeMirror 5 在移动和 bidi 上有一些弱点； CodeMirror 6 刚刚添加了降价支持，尚未广泛使用。 stackedit.io 是值得注意的独立实现，我认为基于 contenteditable。
很少有原生桌面 GUI 的实现。 wereturtle.github.io/ghostwriter 使用 Qt。
Emacs 还可以显示可变字体和图像。 markdown-mode 在文本样式上的 WYSIWYM 做得非常好，并且可以就地渲染图像。 texfrag 可以渲染内联数学（尽管大小已关闭）。

标签： markdown wysiwym

【解决方案1】：

我找到了showdown 和to-markdown 的解决方案，例如结果和他的来源。提示是，我添加了一个 css 语句 style="display: none;"，它使用源隐藏文本区域，而不是更多。 Line in the source file

--> https://github.com/bueltge/Notes

【讨论】：

这基本上就是 Hallo.js 在您在问题中提供的链接中所做的。

【解决方案2】：

但是你还想用markdown？

所以我假设您仍然希望看到降价标记和样式：Editor (demo) 是基于 codemirror 的纯文本降价编辑器。

【讨论】：

编辑器不错，但不切换到预览就无法进行实时编辑。对于编辑器，不知道markdown是不是很容易标记字符串和使用按钮，看到实时结果，无需切换预览，markdown语法。