同一文本区域内的Markdown所见即所得编辑器和预览

Question

我正在寻找一个编辑器，可以在同一个文本框中编写Markdown语法并进行预览，就像Bootstrap WYSIHTML5用于HTML一样。

我不喜欢额外的预览。附加元素中的预览有许多脚本，我可以在网上找到。但对我来说很重要的是，编辑元素也是视图元素，可以使用Markdown编写和查看。也许hallo.js很棒，但我认为它不能与textarea元素一起使用。另外，我可以使用一个小型解决方案，而不是过多地添加按钮和功能。对我来说，Textarea也很重要，因为用户将通过发送post在php中保存，而无需JavaScript。目标是简单的笔记，编写Markdown，或者使用按钮进行格式化，并仅查看格式化后的内容以便于阅读。

提示：我已经阅读了问题#1和问题#2，但只有CK Editor和Aloha是解决方案。这两个很好的项目，但对于我的小要求来说太大了。

非常感谢您的时间。

- bueltge

---

使用Web技术：CodeMirror是支持可变字体大小和小部件的JS语法高亮编辑器 https://codemirror.net/demo/variableheight.html，因此大多数实现都基于它。https://simplemde.com/，https://github.com/laobubu/HyperMD，桌面编辑器（electron）如http://abricotine.brrd.fr/，https://www.zettlr.com/。CodeMirror 5在移动设备和双向文本方面存在一些弱点；CodeMirror 6只添加了Markdown支持，目前尚未广泛使用。https://stackedit.io/是一个值得注意的独立实现，我认为它是基于contenteditable实现的。 - Beni Cherniavsky-Paskin

很少有本地桌面GUI的实现。https://wereturtle.github.io/ghostwriter/使用Qt。 - Beni Cherniavsky-Paskin

Emacs也可以显示可变字体和图片。markdown-mode在文本样式上做得很好，可以原地渲染图像。texfrag可以呈现行内数学公式（尽管大小不准确）。 - Beni Cherniavsky-Paskin

Answer 1

我已经找到了一个与 showdown 和 to-markdown 有关的解决方案，例如结果及其源代码。提示是，我添加了一个CSS语句style="display: none;"，隐藏了带有源代码的文本区域，仅此而已。源文件中的行 --> https://github.com/bueltge/Notes

- bueltge

---

这基本上就是你在问题中提供的链接中Hallo.js所做的事情。 - EpicVoyage

嗨，我正在与类似的问题苦苦挣扎，您说的隐藏文本区域是什么意思？ - codeMike

文本区域是必要的，但是您可以隐藏它们，以便在用户界面中不可见。 - bueltge

Answer 2

但是你仍然想要使用Markdown？

所以我认为你仍然想看到Markdown标记和样式：Editor (demo) 是一个基于CodeMirror的纯文本Markdown编辑器。

- klml

---

编辑器很好，但是没有在不切换到预览的情况下进行实时编辑的功能。对于编辑器来说，如果不了解Markdown语法，可以轻松标记字符串并使用按钮，实时查看结果，而无需切换到预览模式。 - bueltge