Thinkphp5框架中引入Markdown編輯器如何操作

發(fā)布時間：2021-03-08 14:59:16 來源：億速云閱讀：160 作者：TREX 欄目：開發(fā)技術(shù)

這篇文章主要講解了“Thinkphp5框架中引入Markdown編輯器如何操作”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Thinkphp5框架中引入Markdown編輯器如何操作”吧！

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  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 : '編輯你的內(nèi)容...',
      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格式內(nèi)容

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>頁面加載markdown格式內(nèi)容</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 >
```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格式的內(nèi)容

<!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>

感謝各位的閱讀，以上就是“Thinkphp5框架中引入Markdown編輯器如何操作”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對Thinkphp5框架中引入Markdown編輯器如何操作這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

向AI問一下細節(jié)

Thinkphp5框架中引入Markdown編輯器如何操作

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽