洛谷自制 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即可看到效果。