溫馨提示×

PHP中如何實現(xiàn)Markdown的實時預(yù)覽

PHP
小樊
89
2024-08-27 07:24:26
欄目: 編程語言

在 PHP 中實現(xiàn) Markdown 的實時預(yù)覽，可以使用 JavaScript 庫（例如：marked.js）和 PHP 解析庫（例如：Parsedown 或 Michelf PHP Markdown）結(jié)合來實現(xiàn)。

這里是一個簡單的示例，展示了如何使用 Parsedown 和 marked.js 實現(xiàn)實時預(yù)覽：

  1. 首先，下載并包含 Parsedown 庫。你可以從這里下載：Parsedown。將 Parsedown.php 文件放入你的項目文件夾中。

  2. 創(chuàng)建一個名為 index.php 的文件，然后添加以下內(nèi)容：

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

這個示例中，我們使用了一個文本區(qū)域（<textarea>）來輸入 Markdown 文本，并在輸入時實時更新預(yù)覽。我們使用 marked.js 庫將 Markdown 轉(zhuǎn)換為 HTML，并將其顯示在名為 “preview” 的 <div> 元素中。

當(dāng)用戶單擊 “Submit” 按鈕時，表單將提交到 PHP 腳本，你可以在其中處理 Markdown 數(shù)據(jù)（例如將其保存到數(shù)據(jù)庫中）。在這個示例中，我們只是將 Markdown 文本存儲在一個隱藏的輸入字段中，以便在頁面重新加載時保留它。

請注意，這個示例僅用于演示目的。在生產(chǎn)環(huán)境中，你需要對用戶輸入進行驗證和清理，以確保安全性。

0 踩