洛谷自制 markdown 编辑器：markdown-palette 的使用
[編輯] [转简体] （简体译文）
|
作者：huidong
| 分類：【編程】php
[
7 瀏覽
0 評論
2 贊
2 踩
]
概要
正文
直达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即可看到效果。