想弄个md编辑器在网站上,找到了这个编辑器——editor.md
直达github:https://github.com/pandao/editor.md
下载release,看了一下examples,结合网上的教程,大概是这么配置:
在项目中创建editor.php,editor.md文件夹
将下载的editor.md文件夹中的:
css
fonts
images
lib
plugins
editormd.min.js
这些,拷贝到你的项目目录中的editor.md文件夹中。
然后下载 jquery.min.js ,和editor.php放在同一目录。
在editor.php中:
<!DOCTYPE html>
<html>
<head>
<!-- editor.md 所需文件 -->
<link rel="stylesheet" href="./editor.md/css/editormd.css" />
<script src="jquery.min.js"></script>
<script src="./editor.md/editormd.min.js"></script>
<link rel="stylesheet" href="./editor.md/css/editormd.css" />
<script src="./editor.md/lib/marked.min.js"></script>
<script src="./editor.md/lib/prettify.min.js"></script>
<script src="./editor.md/lib/raphael.min.js"></script>
<script src="./editor.md/lib/underscore.min.js"></script>
<script src="./editor.md/lib/sequence-diagram.min.js"></script>
<script src="./editor.md/lib/flowchart.min.js"></script>
<script src="./editor.md/editormd.min.js"></script>
</head>
<body>
<form method="post">
<div id="test-editormd">
<!-- 文本框内是 Markdown 语句 -->
<textarea name="text" style="display:none;"> ## test </textarea>
</div>
<br/>
<button name="button" value="submit">YES</button>
</form>
<script type="text/javascript">
$(function() {
var testEditor = editormd("test-editormd", {
width: "90%",
height: 300,
path : './editor.md/lib/',
// 自定义工具栏
toolbarIcons : function() {
return editormd.toolbarModes['full']; // full, simple, mini
},
});
});
</script>
<hr/>
</body>
</html>
<?php
$button = $_POST['button'];
if($button == "submit")
{
$text = $_POST['text'];
echo "
<div id='test-markdown-view'>
<textarea style='display:none'>{$text}</textarea>
</div>
";
echo "<hr/>Get data:<br/>{$text}<hr/>Data length:".strlen($text);
echo '
<script type="text/javascript">
$(function() {
var testView = editormd.markdownToHTML("test-markdown-view", {
htmlDecode : "style,script,iframe"
});
});
</script>
';
}
?>
done.
运行editor.php即可!
这个就是有一个问题:我运行的时候输入框的工具栏会乱码,一直无法解决,所以最后我没有使用这个编辑器。