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

发布:smiling　来源: PHP粉丝网　添加日期：2022-03-11 11:35:44　浏览: 评论：0　

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

<?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格式的内容

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