本文实例讲述了Thinkphp5框架中引入Markdown编辑器操作。分享给大家供大家参考，具体如下：
编辑器下载地址以及演示:https://pandao.github.io/editor.md/
1.把下载的项目放在public目录下
2.页面中引入jquery.js，editormd.js，editormd.css
demo
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<title>markdown测试</title>
<link rel=\"stylesheet\" href=\"/public/markdown/css/editormd.css\" rel=\"external nofollow\" />
<script src=\"__JS__/jquery.min.js\"></script>
<script src=\"/public/markdown/editormd.js\"></script>
</head>
<body>
<form action=\"{:url(\'test\')}\" enctype=\"multipart/form-data\" method=\'post\'>
<div id=\"content-editormd\" class=\"form-group\">
<textarea style=\"display:none;\" class=\"form-control\" id=\"content-editormd-markdown-doc\" name=\"content-editormd-markdown-doc\"></textarea>
</div>
<button>提交</button>
</form>
<script type=\"text/javascript\">
$(function() {
editormd(\"content-editormd\", {
placeholder : \'编辑你的内容...\',
width : \"100%\",
height : 1000,
syncScrolling : \"single\",
path : \"/public/markdown/lib/\",
watch : true,
previewTheme : \"white\",//预览
theme : \'white\',//工具栏
saveHTMLToTextarea : true, // 保存HTML到Textarea
// 图片上传
imageUpload : true,
imageFormats: [\"jpg\",\"jpeg\",\"gif\",\"png\",\"bmp\",\"webp\"],
imageUploadURL: \"/api/Upload/markdownUpload\",
toolbarIcons : function() { //自定义工具栏，后面有详细介绍
return editormd.toolbarModes[\'full\']; // full, simple, mini
},
});
});
//上传
/*
{
success : 0 | 1, // 0 表示上传失败，1 表示上传成功
message : \"提示的信息，上传成功或上传失败及错误信息等。\",
url : \"图片地址\" // 上传成功时才返回
}
*/
</script>
</body>
</html>
上传图片
public function markdownUpload(){
$config = [
\'size\' => 2097152,
\'ext\' => \'jpg,gif,png,bmp\'
];
$file = $this->request->file(\'editormd-image-file\');
$upload_path = str_replace(\'\\\\\', \'/\', ROOT_PATH . \'public/uploads\');
$save_path = \'/uploads/\';
$info = $file->validate($config)->move($upload_path);
if ($info) {
$result = [
\'success\' => 1,
\'message\' => \'上传成功\',
\'url\' => str_replace(\'\\\\\', \'/\', \'/public/\'.$save_path . $info->getSaveName())
];
} else {
$result = [
\'success\' => 0,
\'message\' => $file->getError(),
\'url\' => str_replace(\'\\\\\', \'/\', \'/public/\'.$save_path . $info->getSaveName())
];
}
return json($result);
}
3.页面加载markdown格式内容
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<title>页面加载markdown格式内容</title>
<link href=\"/public/markdown/css/editormd.min.css\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"stylesheet\" />
<script src=\"__JS__/jquery.min.js\"></script>
<script src=\"/public/markdown/lib/marked.min.js\"></script>
<script src=\"/public/markdown/lib/prettify.min.js\"></script>
<script src=\"/public/markdown/lib/raphael.min.js\"></script>
<script src=\"/public/markdown/lib/underscore.min.js\"></script>
<script src=\"/public/markdown/lib/sequence-diagram.min.js\"></script>
<script src=\"/public/markdown/lib/flowchart.min.js\"></script>
<script src=\"/public/markdown/lib/jquery.flowchart.min.js\"></script>
<script src=\"/public/markdown/editormd.js\"></script>
</head>
<body>
<div id=\"doc-content\">
<textarea style=\"display:none;\">
```php
<?php
echo 1;
?>
```
</textarea>
</div>
<script type=\"text/javascript\">
var testEditor;
$(function () {
testEditor = editormd.markdownToHTML(\"doc-content\", {//注意：这里是上面div的id
htmlDecode: \"style,script,iframe\",
emoji: true,
taskList: true,
tocm: true,
tex: true, // 默认不解析
flowChart: true, // 默认不解析
sequenceDiagram: true, // 默认不解析
codeFold: true
});});
</script>
</body>
</html>
4.直接展示html格式的内容
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<title>前端显示</title>
<link href=\"/public/markdown/css/editormd.min.css\" rel=\"external nofollow\" rel=\"external nofollow\" rel=\"stylesheet\" />
<script src=\"__JS__/jquery.min.js\"></script>
<script src=\"/public/markdown/lib/marked.min.js\"></script>
<script src=\"/public/markdown/lib/prettify.min.js\"></script>
<script src=\"/public/markdown/editormd.min.js\"></script>
</head>
<body>
<div id=\"doc-content\">
{:htmlspecialchars_decode($data)}
</div>
<script type=\"text/javascript\">
$(function () {
editormd.markdownToHTML(\"doc-content\");
})
</script>
</body>
</html>
更多关于thinkPHP相关内容感兴趣的读者可查看本站专题：《ThinkPHP入门教程》、《thinkPHP模板操作技巧总结》、《ThinkPHP常用方法总结》、《codeigniter入门教程》、《CI(CodeIgniter)框架进阶教程》、《Zend FrameWork框架入门教程》及《PHP模板技术总结》。
希望本文所述对大家基于ThinkPHP框架的PHP程序设计有所帮助。
© 版权声明
THE END
暂无评论内容