阅读量:0
在 PHP 中实现 Markdown 的实时预览，可以使用 JavaScript 库（例如：marked.js）和 PHP 解析库（例如：Parsedown 或 Michelf PHP Markdown）结合来实现。
这里是一个简单的示例，展示了如何使用 Parsedown 和 marked.js 实现实时预览：
首先，下载并包含 Parsedown 库。你可以从这里下载：Parsedown。将
Parsedown.php文件放入你的项目文件夹中。创建一个名为
index.php的文件，然后添加以下内容：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Markdown Real-time Preview</title> <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> </head> <body> <textarea id="markdown-input" style="width: 48%; height: 300px;" oninput="updatePreview();" placeholder="Type your markdown here..."></textarea> <div id="preview" style="width: 48%; height: 300px; border: 1px solid #ccc; padding: 10px; overflow-y: scroll;"></div> <?php require_once 'Parsedown.php'; $parsedown = new Parsedown(); if (isset($_POST['markdown'])) { echo<script>document.getElementById("markdown-input").value = ' . json_encode($_POST['markdown']) . '; updatePreview();</script>'; } ?> <form method="post"> <input type="hidden" name="markdown" id="markdown-hidden"> <button type="submit">Submit</button> </form> <script> function updatePreview() { const markdownInput = document.getElementById('markdown-input'); const preview = document.getElementById('preview'); const markdownHidden = document.getElementById('markdown-hidden'); const markdownText = markdownInput.value; const html = marked(markdownText); preview.innerHTML = html; markdownHidden.value = markdownText; } </script> </body> </html> 这个示例中，我们使用了一个文本区域（<textarea>）来输入 Markdown 文本，并在输入时实时更新预览。我们使用 marked.js 库将 Markdown 转换为 HTML，并将其显示在名为 “preview” 的 <div> 元素中。
当用户单击 “Submit” 按钮时，表单将提交到 PHP 脚本，你可以在其中处理 Markdown 数据（例如将其保存到数据库中）。在这个示例中，我们只是将 Markdown 文本存储在一个隐藏的输入字段中，以便在页面重新加载时保留它。
请注意，这个示例仅用于演示目的。在生产环境中，你需要对用户输入进行验证和清理，以确保安全性。
