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