Warning: file_get_contents(https://whois.pconline.com.cn/jsLabel.jsp?ip=127.0.0.1) [function.file-get-contents]: failed to open stream: HTTP request failed! HTTP/1.1 503 Service Temporarily Unavailable in D:\wwwroot\huidong\wwwroot\function.inc.php on line 884
洛谷自制markdown编辑器:markdown-palette的使用 - huidong

huidong

首页 | 会员登录 | 关于争取 2022 寒假做出汇东网 Ver3.0.0 !
搜索文章


直达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即可看到效果。


代码自行理解。




返回首页


Copyright (C) 2018-2024 huidong