Editor.md - 开源在线 Markdown 编辑器

放于public文件夹下

html代码：

				<div class="layui-col-md12" id="content">
					<textarea name="content"  placeholder="详情" class="layui-textarea">{notempty name="rs['content']"}{$rs['content']}{/notempty}</textarea>
				</div>

js代码

<!-- Editor.md 编辑器 开始  -->
<link rel="stylesheet" href="__STATIC__/editormd/css/editormd.css" />
<script src="__STATIC__/jquery/3.6.0/jquery.min.js"></script>
<script src="__STATIC__/editormd/editormd.min.js"></script>
<script type="text/javascript">
	var testEditor;
	$(function() {
		testEditor = editormd("content", {
			width   : "100%",
			height  : 320,
			// watch : false,
			// syncScrolling : "single",
			path    : "__STATIC__/editormd/lib/",
			htmlDecode : "style,script,iframe|on*",
			/**上传图片相关配置如下*/
			imageUpload : true,//开启上传图片吗？
			imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],//图片支持的格式
			imageUploadURL : "{:url('common/uploads',['filetype'=>0])}",//上传图片使用方法 
			saveHTMLToTextarea : true,//这个配置，方便post提交html源码表单，保存 HTML 到 Textarea它关乎后端是否可以获取到值
			emoji: true,
			taskList: true, 
			tocm: true,         // Using [TOCM]
			tex: true,                   // 开启科学公式TeX语言支持，默认关闭
			flowChart: true,             // 开启流程图支持，默认关闭
			sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
			toolbarIcons : function() {  //自定义工具栏，后面有详细介绍
				return editormd.toolbarModes['full']; // full, simple, mini
			},
		});
	});
</script>
<!-- Editor.md 编辑器 结束  -->

重点，上传图片接口

/**上传图片相关配置如下*/

            imageUpload : true,//开启上传图片吗？

            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],//图片支持的格式

            imageUploadURL : "{:url('common/uploads',['filetype'=>0])}",//上传图片使用方法

            saveHTMLToTextarea : true,//这个配置，方便post提交html源码表单，保存 HTML 到 Textarea它关乎后端是否可以获取到值

上传成功后台返回json样式如下：

{
    success : 0 | 1, //0表示上传失败;1表示上传成功
    message : "提示的信息",
    url     : "图片地址" //上传成功时才返回
}

php接收表单部分

$file = request()->file('editormd-image-file');

用这个
$file = request()->file('editormd-image-file');

而不是用这个接收
$file = request()->file('file');
这个接收为空

参考：

THINKPHP框架中引入Markdown编辑器和解决Github emoji图标无法显示_markdown php编辑器-CSDN博客

Thinkphp5中引入Markdown编辑器 - 代码先锋网