editormd编辑器的使用

下载地址

放到后台

准备一个上传图片的方法

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>