Thinkphp5框架中引入Markdown编辑器操作示例

砸漏

发布于 2020-11-02 14:35:39

6080

发布于 2020-11-02 14:35:39

文章被收录于专栏：恩蓝脚本恩蓝脚本

本文实例讲述了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
 &lt;?php
 
 echo 1;
 ?&gt;
```
</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框架的PHP程序设计有所帮助。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-09-11 ，如有侵权请联系 cloudcommunity@tencent.com 删除

markdown