当前位置：文江博客话题详情

在文本区域中进行 Markdown 实时预览？

发布于 2024-08-13 21:00:49 字数 732 浏览 5 评论 0原文

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

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

我目前正在使用 MarkItUp，它仅在文本区域之后显示预览，或在弹出窗口中。

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

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

三生殊途 2024-08-20 21:00:49

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

回复收藏 0 原文

落日海湾 2024-08-20 21:00:49

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

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

示例

运行代码片段并在 中编写一些内容文本区域

<!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>

I found this library,
and here is the js file.
very easy to use, you just add the library in script tag, and use marked.parse() function

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

Example

Run the snippet and write something in 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>

回复收藏 0 原文