Editor.md官网:https://pandao.github.io/editor.md/index.html
下载后解压放到项目内,和引入ueditor差不多
1、引入项目资源
<!--markdown编辑器--> <script src="{$Think.config.__STATIC__}/admin/plus/editormd/jquery.min.js"></script> <link rel="stylesheet" href="{$Think.config.__STATIC__}/admin/plus/editormd/css/editormd.css" /> <script src="{$Think.config.__STATIC__}/admin/plus/editormd/editormd.min.js"></script>
2、在自己的页面中加上对应的id
<div id="test-editormd"> <textarea></textarea> </div>
3、配置编辑器
<script> var testEditor; testEditor = editormd("test-editormd", { placeholder:'本编辑器支持Markdown编辑,左边编写,右边预览', //默认显示的文字,这里就不解释了 width: "100%", height: 640, syncScrolling: "single", path: "{$Think.config.__STATIC__}/admin/plus/editormd/lib/", //你的path路径(原资源文件中lib包在我们项目中所放的位置) theme: "white",//工具栏主题 previewTheme: "white",//预览主题 editorTheme: "pastel-on-white",//编辑主题 imageUpload : true, imageFormats : ["jpg","jpeg","gif","png","bmp","webp"], imageUploadURL : "{:url('Knowledge/uploadImg')}",//上传图片使用方法 saveHTMLToTextarea: true, emoji: true, taskList: true, tocm: true, // Using [TOCM] tex: true, // 开启科学公式TeX语言支持,默认关闭 flowChart: true, // 开启流程图支持,默认关闭 sequenceDiagram: true, // 开启时序/序列图支持,默认关闭, toolbarIcons : function() { //自定义工具栏,后面有详细介绍 return editormd.toolbarModes['full']; // full, simple, mini }, }); testEditor.getMarkdown(); // 在js中调用getMarkdown这个方法可以获得Markdown格式的文本。 </script>
4、tp5后台图片上传代码
//Markdown上传图片 public function uploadImg(){ if(request()->isPost()){ $file = request()->file('editormd-image-file'); $info = $file->move( './uploads/knowledge'); if($info){ $value=config('uploadFiles').'/knowledge/'.$info->getSaveName(); return json(['url'=>$value,'success'=>1,'message'=>'图片上传成功!']); } else{ echo $file->getError(); } }else{ $this->error('非法请求'); } }