微客导航 » 文章资讯 » Thinkphp5框架中引入Markdown编辑器操作示例

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

2023-07-23 19:40:05 155

本文实例讲述了Thinkphp5框架中引入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',//工具栏 saveHTMLToTextarea:true,//保存HTML到Textarea //图片上传 imageUpload:true, imageFormats:["jpg","jpeg","gif","png","bmp","webp"], imageUploadURL:"/api/Upload/markdownUpload", toolbarIcons:function(){//自定义工具栏，后面有详细介绍 returneditormd.toolbarModes['full'];//full,simple,mini }, }); }); //上传 /* { success:0|1,//0表示上传失败，1表示上传成功 message:"提示的信息，上传成功或上传失败及错误信息等。", url:"图片地址"//上传成功时才返回 } */

上传图片

publicfunctionmarkdownUpload(){
$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())
];
}
returnjson($result);
}

3.页面加载markdown格式内容





页面加载markdown格式内容














```php
<?php

echo1;
?>
```

vartestEditor; $(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)框架进阶教程》、《ZendFrameWork框架入门教程》及《PHP模板技术总结》。

希望本文所述对大家基于ThinkPHP框架的PHP程序设计有所帮助。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐