PHP中如何实现Markdown的实时预览 - 问答

在 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 文本存储在一个隐藏的输入字段中，以便在页面重新加载时保留它。

请注意，这个示例仅用于演示目的。在生产环境中，你需要对用户输入进行验证和清理，以确保安全性。

0 赞

0 踩