匯東網


洛谷自制 markdown 编辑器:markdown-palette 的使用

[編輯] [转简体]
|
作者:huidong | 分類:【編程】php
[ 18 瀏覽 0 評論 8 贊 5 踩 ]

概要

正文

直达github :https://github.com/luogu-dev/markdown-palettes


下载release,到dist文件夹。只保留dist文件夹下的:

fonts

markdown-palettes.css

markdown-palettes.min.js

其余全部删掉。

在当前目录下创建editor.php


在editor.php中:

<!DOCTYPE html>

<meta charset="UTF-8">
<link rel="stylesheet" href="markdown-palettes.css">
<script src="markdown-palettes.min.js"></script>

<form method="post">
    <div style="height: 300px;">
        <div id="editor"></div>
    </div>
    <div style="display:_none;"><input name="text" id="text" value="default_value"></input></div>
    <br/>
    <button name="button" value="submit" onclick='send();'> 提交 </button>
</form>

<hr/>
<div id="show"></div>

<button onclick='show();'>SHOW</button>

<script>

    function show()
    {
        document.getElementById("show").innerHTML = "Markdown 内容:<br/>" + markdownEditor.content + "<hr/>渲染效果:<br/>" + document.getElementsByClassName("mp-preview-area").innerHTML;
    }

    function send()
    {
        document.getElementById("text").value = markdownEditor.content;
        alert(document.getElementById("text").value);
    }

    var markdownEditor = new MarkdownPalettes("#editor");
    markdownEditor.content = "# This is markdown";
</script>


<?php

    if($_POST['button'] == "submit")
    {
        $text = $_POST['text'];
        
        echo "<hr/>接收到表单消息,Markdown 内容为:<br/>";
        echo $text;
    }
    
?>


运行editor.php即可看到效果。




[ 8] [ 5]


 評論區  0 條評論

+ 添加評論