CKEditor 5 загрузить изображение, какую информацию возвращает загружаемое изображение? - PullRequest
Новая
       13

CKEditor 5 загрузить изображение, какую информацию возвращает загружаемое изображение?

0 голосов
/ 04 мая 2018

Это веб-код: 

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 возвращал информацию, но все равно отказ.

Что мне нужно вернуть в фоновом режиме, чтобы преуспеть, или я пропустил шаг? спасибо.

enter image description here

1 Ответ

0 голосов
/ 10 мая 2018

Многие задают этот вопрос, но ни у кого из них нет четкого решения. Наконец я нашел это. Мой код выглядит следующим образом. 

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 );
    } );
...