php预览md文件,Thinkphp5框架中引入Markdown编辑器操作示例

本文实例讲述了Thinkphp5框架中引入Markdown编辑器操作。分享给大家供大家参考，具体如下：

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() { //自定义工具栏，后面有详细介绍

return editormd.toolbarModes['full']; // full, simple, mini

},

});

});

//上传

/*

{

success : 0 | 1, // 0 表示上传失败，1 表示上传成功

message : "提示的信息，上传成功或上传失败及错误信息等。",

url : "图片地址" // 上传成功时才返回

}

*/

上传图片

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

页面加载markdown格式内容

```php

<?php

echo 1;

?>

```

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

});});

4.直接展示html格式的内容

前端显示

{:htmlspecialchars_decode($data)}

$(function () {

editormd.markdownToHTML("doc-content");

})

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