本文实例讲述了thinkphp5框架中引入markdown编辑器操作。分享给大家供大家参考，具体如下：
编辑器下载地址以及演示:
1.把下载的项目放在public目录下
2.页面中引入jquery.js，editormd.js，editormd.css
demo
<!doctype html><html lang="en"><head> <meta chart="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于易水送人()) ]; } el { $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 chart="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/quence-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, // 默认不解析 quencediagram: true, // 默认不解析 codefold: true });}); </script></body></html>4.直接展示html格式的内容
<!doctype html><html lang="en"><head> <meta chart="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>
本文发布于:2023-04-08 17:51:07，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/f4504cb7248d695e21e1e02061757899.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：Thinkphp5框架中引入Markdown编辑器操作示例.doc
本文 PDF 下载地址：Thinkphp5框架中引入Markdown编辑器操作示例.pdf
| 留言与评论（共有 0 条评论） |
