本文實例講述了Thinkphp5框架中引入Markdown編輯器操作。分享給大家供大家參考，具體如下：
編輯器下載地址以及演示:https://pandao.github.io/editor.md/
1.把下載的項目放在public目錄下
2.頁面中引入jquery.js，editormd.js，editormd.css
demo
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<!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> |
上傳圖片
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
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格式內容
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<!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格式的內容
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!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框架的PHP程序設計有所幫助。
原文鏈接：https://blog.csdn.net/huangyuxin_/article/details/93903833
