CKEditor 5上传图片代码整合 - 

<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>修改 
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit">
    <link rel="shortcut icon" href="/assets/img/favicon.ico">
    <link href="/assets/css.css" rel="stylesheet">
    <link href='/static/css/xxx.css' rel='stylesheet' type='text/css' />
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
        <script src="/assets/js/html5shiv.js"></script>
        <script src="/assets/js/respond.min.js"></script>
        <![endif]-->
        <style>
                .ck-editor__editable {
                    min-height: 100px;
                }
            </style>
</head>

<body class="inside-header inside-aside is-dialog">
    <div id="main" role="main">
        <div class="content" style="padding-top: 18px;padding-left:80px;padding-right: 80px;">
            <form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST"
                action="/article/edit/">

                <div class="form-group">
                    <label for="c-qrcode_id" class="control-label col-xs-12 col-sm-2">标题:</label>
                    <div class="col-xs-12 col-sm-4">
                        <input class="form-control" name="row[title]" id="title"
                            value="">
                    </div>
                    <label for="c-qrcode_id" class="control-label col-xs-12 col-sm-1">排序值:</label>
                    <div class="col-xs-4 col-sm-2">
                        <input class="form-control" name="row[sortrank]" id="title"
                            value="">
                    </div>
                </div>

                <div class="form-group">

                    <label for="c-status" class="control-label col-xs-12 col-sm-1">状态:</label>
                    <div class="radio col-xs-12 col-sm-2">
                        <label for="row[status]-inprogress">
                            <input id="row[status]-inprogress" name="row[status]" type="radio" value="1"/>
                            正常</label>
                        <label for="row[status]-expired">
                            <input id="row[status]-expired" name="row[status]" type="radio"  value="0"/>
                            禁用</label>
                    </div>

                </div>

                <div class="form-group">
                    <div id="mdeditor">
                        <textarea name="content" id="content" style="width:80%;"></textarea>
                    </div>
                </div>

                <div class="">
                    <label for="description" class="">描述:</label>
                    <div class="">
                        <textarea name="row[description]" class="form-control" rows="5"
                            id="description"></textarea>
                    </div>
                </div>

                <div class="form-group" style="text-align:center;">
                    <button type="submit" class="btn btn-success btn-embossed">
                        提交
                    </button>
                </div>
            </form>
        </div>
    </div>
</body>
<script type="text/javascript" src="/static/js/jquery.js"></script>
<script type="text/javascript" src="https://cdn.ckeditor.com/ckeditor5/12.4.0/classic/ckeditor.js"></script>
<script type="text/javascript" src="/static/js/layer/layer.js"></script>
<script type="text/javascript" src="/static/js/jquery.form.js"></script>
<script type="text/javascript">
    //初始化编辑器
    ClassicEditor.create(document.querySelector('#content'), {
        //removePlugins: ['MediaEmbed'], //除去视频按钮
        language: 'zh-cn',  // 中文
        ckfinder: {
             uploadUrl: "/api/uploader/ckeditor5"
        }
    }).then(editor => {
        //const toolbarContainer = document.querySelector('#toolbar-container')
        //toolbarContainer.appendChild(editor.ui.view.toolbar.element)
        // 加载了适配器
        //editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
        //    return new MyUploadAdapter(loader)
        //}
        this.editor = editor // 将编辑器保存起来，用来随时获取编辑器中的内容等，执行一些操作
    }).catch(error => {
        console.error('error')
    })

    class MyUploadAdapter {
        constructor(loader) {
            this.loader = loader;
        }
        upload() {
            return new Promise((resolve, reject) => {
                const data = new FormData();
                let size = this.loader.file.size;
                console.error(size);
                console.log(this.loader.file);
                data.append('imgfile', this.loader.file);
                data.append('allowSize', 10);//允许图片上传的大小/兆
                $.ajax({
                    url: '/upload-url/ckeditor5',
                    type: 'POST',
                    data: data,
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        if (data.res) {
                            resolve({
                                default: data.url
                            });
                        } else {
                            reject(data.msg);
                        }
                    }
                });
            });
        }
        abort() {
        }
    }

</script>

</html>