Thinkphp5中引入Markdown编辑器的具体方法指什么

发布时间：2022-12-19 08:42 所属栏目：121 来源：互联网

导读：

导读：这篇文章主要介绍Thinkphp5中引入Markdown编辑器的具体方法是什么，有一些人在Thinkphp5中引入Markdown编辑器的具体方法是什么的问题上存在疑惑，接下来小编就给大家来介绍一下相关的内容，希望对大家解答有帮助，有这个方面学习需要的朋友就继续往下看吧。

　　这篇文章主要介绍“Thinkphp5中引入Markdown编辑器的具体方法是什么”，有一些人在Thinkphp5中引入Markdown编辑器的具体方法是什么的问题上存在疑惑，接下来小编就给大家来介绍一下相关的内容，希望对大家解答有帮助，有这个方面学习需要的朋友就继续往下看吧。

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

　　关于“Thinkphp5中引入Markdown编辑器的具体方法是什么”的内容今天就到这，感谢各位的阅读，大家可以动手实际看看，对大家加深理解更有帮助哦。

（编辑：ASP站长网）