CKEditor 5 图片上传配置和图片上传返回参介绍

之前一直使用的是ckeditor4版本编辑器，最近发现ckeditor5版本编辑器也挺不错，准备试试。结果在上传图片这方面发现与之前ckeditor4版本上传配置不一样了。

之前的ckeditor4版本html5 下面配置上传图片地址为：

CKEDITOR.editorConfig = function( config ) {
     config.filebrowserImageUploadUrl = '/image/ckeditorImage?type=Image';//图片上传路径
})

参考样的配置路径，发现ckeditor5 无法使用了，下面进行了研究发现ckeditor5配置发生了变化。

CKEditor 5图片上传地址配置

ckeditor5首先需要确定的是你构建的时候选的那个图片上传adapter，我这里以CKFinder upload adapter

图片上传配置为：

 
ClassicEditor
                .create( document.querySelector( '#contentHtml' ), {
                    licenseKey: '',
                    ckfinder: {
                        uploadUrl: "/ajax/form/file/uploadImage?type=Image"//图片上传路径
                    },
                    
                } )
                .then( editor => {
                    editor.setData($('#cocntentScript').html());
                    window.editor = editor;
                } )
                .catch( error => {
                    console.error( 'Oops, something went wrong!' );
                    console.error( 'Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:' );
                    console.warn( 'Build id: l1txv9x2i4j9-f8u2t0fifydx' );
                    console.error( error );
                } );

以上ckfinder uploadUrl配置即为图片上传配置。此次图片上传部分前端搞定

CKEditor 5图片上传返回参数

返回参数与CKEditor4 相同json格式

成功为：

{
    "uploaded":1,
    "url":"图片地址(如：/upload/xxx/abc.jpg)",
    "fileName":"图片名称（如：a.jpg）"
}

失败为：

{
    "uploaded":0,
    "fileName":"abc.jpg",
    "error":{
        "number":201,
        "message":"图片超大，限制宽度500px"
    }
}

至此CKEditor 5 图片返回参数介绍完毕。

参考文章：

https://www.cundage.com/article/1614063644608303105.html