放到后台
准备一个上传图片的方法
public function mUpload()
{
$file = $this->request->file('editormd-image-file');
$result = $file->validate([
'ext' => 'jpg,jpeg,png',
'size' => 1024 * 1024
])->move('.' . DS . 'upload' . DS . 'avatar' . DS);
if ($result) {
$avatarSaveName = str_replace('//', '/', str_replace('\\', '/', $result->getSaveName()));
$avatar = 'avatar/' . $avatarSaveName;
session('avatar', $avatar);
return json_encode([
'success' => 1,
"message" => "上传成功",
"url" => cmf_get_image_url($avatar)
]);
} else {
return json_encode([
'success' => 0,
"message" => $file->getError(),
"url" => ''
]);
}
}
注意这里的是editormd-image-file
引入css 和 js JQ也是要的
<link rel="stylesheet" href="__STATIC__/js/editor/css/editormd.min.css" />
<div id="test-editormd">
<textarea class="editormd-markdown-textarea" name="test-editormd-markdown-doc"></textarea>
<!-- 第二个隐藏文本域,用来构造生成的HTML代码,方便表单POST提交,这里的name可以任意取,后台接受时以这个name键为准 -->
<textarea class="editormd-html-textarea" name="content"></textarea>
</div>
<script src="__STATIC__/js/editor/editormd.js"></script>
js代码
<script type="text/javascript">
$(function() {
var testEditor = editormd("test-editormd", {
width: "90%",
height: 640,
markdown : "",
path : '__STATIC__/js/editor/lib/',
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "{:url('user/Profile/mUpload')}",
/*
上传的后台只需要返回一个 JSON 数据,结构如下:
{
success : 0 | 1, // 0 表示上传失败,1 表示上传成功
message : "提示的信息,上传成功或上传失败及错误信息等。",
url : "图片地址" // 上传成功时才返回
}
*/
});
});
</script>