PHP中怎样引入和使用Markdown编辑器

本文实例讲述了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>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！