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

本文实例讲述了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
&lt;?php

echo 1;
?&gt;
```
</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>

更多关于thinkPHP相关内容感兴趣的读者可查看本站专题:《ThinkPHP入门教程》、《thinkPHP模板操作技巧总结》、《ThinkPHP常用方法总结》、《codeigniter入门教程》、《CI(CodeIgniter)框架进阶教程》、《Zend FrameWork框架入门教程》及《PHP模板技术总结》。

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

您可能感兴趣的文章:thinkphp3.2嵌入百度编辑器ueditor的实例代码ThinkPHP中使用Ueditor富文本编辑器ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法ThinkPHP中FCKeditor编辑器的使用方法TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析利用Electron简单撸一个Markdown编辑器的方法利用Vue实现一个markdown编辑器实例代码vue中利用simplemde实现markdown编辑器(增加图片上传功能)SpringBoot使用Editor.md构建Markdown富文本编辑器示例

相关推荐

MYSQL 性能分析器 EXPLAIN 用法实例分析

mysql 触发器创建与使用方法示例

MySQL联表查询基本操作之left-join常见的坑

mysql 触发器语法与应用示例