Textarea 中的 Markdown 实时预览？

Question

是否有任何 Javascript Markdown 编辑工具栏或库可以在 textarea 中显示实时预览并隐藏格式标记（**、___ 等），类似于TinyMCE 的实现？

如果没有，我将如何在 jQuery 中实现它？

我目前使用MarkItUp ，这只能说明预览文本域后，或在弹出。

这篇提到“BlueCloth”的帖子听起来很接近，但尽管我对一般实现感兴趣，但 RoR 版本在现阶段并不是很有用（我使用的是 Python/Zope）。

我知道 Markdown 的大部分优点在于它是简单的文本格式字符，但有问题的站点相当非技术性，我主要使用 Markdown Python 库，因为它具有“邪恶”的 html 截取功能。

更新：作为对评论的回应，我想我会很高兴在输入时显示格式标记，但如果使用工具栏则不会（即我假设 GUI 用户不是技术用户）。

或者，其他工具栏有一个“源”视图，这可能是一个选项。

Answer 1

如果您在 textarea 中需要 Markdown 支持而无需额外的 GUI，那么textarea-markdown可能会有所帮助

Answer 2

CKEditor可能太重了，但它很好。

Answer 3

我找到了这个库，这里是js 文件。
非常容易使用，您只需在script标签中添加库，并使用marked.parse()函数

  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script>
        target.innerHTML = marked.parse("#Example");
  </script>

例子

运行代码片段并在textarea写一些东西

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <textarea id="textareaID"> # Example Title ## list 1. one 1. tow 1. three </textarea> <div id="content"></div> <script> $("#textareaID").on('input', function (e) { document.getElementById('content').innerHTML = marked.parse(e.target.value); }); </script> </body> </html>

Answer 4

实现它的唯一方法是使用iframe 。

Textarea 中的 Markdown 实时预览？

问题描述

4 个解决方案

解决方案1
1 2020-04-10 09:01:03

解决方案2
0 2009-12-08 15:29:42

解决方案3
0 2021-11-27 13:42:32

例子

解决方案4
-3 2009-12-08 15:29:47

Textarea 中的 Markdown 实时预览？

问题描述

4 个解决方案

解决方案1 1 2020-04-10 09:01:03

解决方案2 0 2009-12-08 15:29:42

解决方案3 0 2021-11-27 13:42:32

例子

解决方案4 -3 2009-12-08 15:29:47

解决方案1
1 2020-04-10 09:01:03

解决方案2
0 2009-12-08 15:29:42

解决方案3
0 2021-11-27 13:42:32

解决方案4
-3 2009-12-08 15:29:47