Thinkphp 5フレームワークにMarkdownエディタを導入する操作例

5178 ワード

この例では、Thinkphp 5フレームワークにMarkdownエディタを導入する操作について説明します.皆さんの参考にしてください.具体的には以下の通りです.
エディタのダウンロードアドレスとプレゼンテーション:https://pandao.github.io/editor.md/
1.ダウンロードしたアイテムをpublicディレクトリの下に置く
2.ページにjqueryを導入する.js,editormd.js,editormd.css
demo





  
  markdown

$(function() {
editormd("content-editormd", {
placeholder:'あなたのを ...'
width : "100%",
height : 1000,
syncScrolling : "single",
path : "/public/markdown/lib/",
watch : true,
previewTheme:[white],//プレビュー
theme:'white',//ツールバー
saveHTML ToTextarea: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:「アドレス」//アップロードにしたにる
}
*/

 
   
  
   
  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  
  
   



 
  markdown 
 
 
 
 
 
 
 
 
 
 


 
 
```php
 <?php
 
 echo 1;
 ?>
```


 

  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
    });});
 




  
  
 4. html  
  
   



 
  
 
 
 
 
 
 


 
 {:htmlspecialchars_decode($data)}
 

  $(function () {
    editormd.markdownToHTML("doc-content");
  })




  
  
  thinkPHP ：《ThinkPHP 》、《thinkPHP 》、《ThinkPHP 》、《codeigniter 》、《CI(CodeIgniter) 》、《Zend FrameWork 》 《PHP 》。 
  ThinkPHP PHP 。