PHP中如何实现Markdown的实时预览

   2024-10-01 3110
核心提示:在 PHP 中实现 Markdown 的实时预览,可以使用 JavaScript 库(例如:marked.js)和 PHP 解析库(例如:Parsedown 或 Michelf PH

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

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

 
举报打赏
 
更多>同类维修大全
推荐图文
推荐维修大全
点击排行

网站首页  |  关于我们  |  联系方式网站留言    |  赣ICP备2021007278号