Question

这是网络代码：

DecoupledEditor
        .create( document.querySelector( '#webDetails' ),{
            language: 'zh-cn',
            image: {
                toolbar: [ 'imageTextAlternative' ],
                styles: [ 'full', 'side' ]
            },
            ckfinder: {
                uploadUrl: '<%=WEBPATH%>/platform/updateMaterial'
            }
        } )
        .then( editor => {
            const toolbarContainer = document.querySelector( '#toolbar-webDetails' );
            toolbarContainer.appendChild( editor.ui.view.toolbar.element );

        } )

这是Spring控制器：

@PostMapping("updateMaterial")
@ResponseBody
public String updateMaterial(@RequestParam("upload") MultipartFile file, HttpServletRequest request){
    String trueFileName = null;
    String realPath  = null;
    try {
        realPath = request.getSession().getServletContext().getRealPath("/upload");
        System.out.println(realPath);
        trueFileName = uploadImg(realPath, file);
    } catch (IllegalStateException | IOException e) {
        e.printStackTrace();
    }
    return "{\"default\":\"" + realPath + File.separator + trueFileName + "\"}";
}

这里我返回磁盘上图像的地址。它是json String风格。我希望CKEditor 5 api返回信息，但仍然失败。

我需要在后台返回什么才能成功，或者我错过了这一步？谢谢。

Answer 1

有很多人提出这个问题，但没有一个人有明确的解决方案。最后，我发现了它。我的代码如下。

class UploadAdapter {
    constructor(loader) {
        this.loader = loader;
    }
    upload() {
        return new Promise((resolve, reject) => {
            const data = new FormData();
            data.append('upload', this.loader.file);
            data.append('allowSize', 10);//允许图片上传的大小/兆
            $.ajax({
                url: 'loadImage',
                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() {
    }
}

DecoupledEditor
    .create( document.querySelector( '#b' ), {
        language:"zh-cn"
    })
    .then( editor => {
        const toolbarContainer = document.querySelector( '#a' );
        toolbarContainer.appendChild( editor.ui.view.toolbar.element );

       // This place loads the adapter.
        editor.plugins.get('FileRepository').createUploadAdapter = (loader)=>{
            return new UploadAdapter(loader);
        };
    } )
    .catch( error => {
        console.error( error );
    } );

CKEditor 5上传图片，上传图片返回哪些信息？

1 个答案: