直达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即可看到效果。
代码自行理解。