如何在CKEditor 5中启用图像上传支持？ [英] How to enable image upload support in CKEditor 5?

问题描述

我会将ckeditor v5用于我的项目。我试图使用图片插件，但是我找不到足够的信息。

I will use the ckeditor v5 into my project. I´ve trying to use the image plugin, but I don´t find enough informations about it.

如果你看到Demoe 这里，您可以使用Drag& Drop轻松上传图像。但是当我尝试拖动和放下图像时，我会尝试使用下载气囊拉链时没有任何反应。也没有错误。

If you see the Demoe here, you easily upload images with Drag&Drop. But when I will try it with the download ballon zip nothing happens when I try to Drag&Drop a image. There is also no error.

有没有办法在downladable变体中使用此图像支持？

Is there a way to use this image support in the downladable variant?

推荐答案

是的，图像上传包含在所有可用的版本中。但是，为了使其工作，您需要配置一个现有的上载适配器或编写自己的上载适配器。简而言之，上传适配器是一个简单的类，其作用是将文件发送到服务器（以任何方式），并在完成后解析返回的承诺。

Yes, image upload is included in all the available builds. In order to make it work, though, you need to configure one of the existing upload adapters or write your own. In short, upload adapter is a simple class which role is to send a file to a server (in whatever way it wants) and resolve the returned promise once it's done.

您可以在官方图片上传指导或查看以下可用选项的简短摘要。

You can read more in the official Image upload guide or see the short summary of the available options below.

内置两个-in adapter：

There are two built-in adapters:

• 对于 CKFinder ，要求您在服务器上安装CKFinder连接器。

• For CKFinder which require you to install the CKFinder connectors on your server.

在服务器上安装连接器后，可以将CKEditor配置为通过设置 将文件上传到该连接器CONF ig.ckfinder.uploadUrl 选项：

Once you have the connector installed on your server, you can configure CKEditor to upload files to that connector by setting the config.ckfinder.uploadUrl option:

ClassicEditor
    .create( editorElement, {
        ckfinder: {
            uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json'
        }
    } )
    .then( ... )
    .catch( ... );

您还可以启用与CKFinder客户端文件管理器的完全集成。查看 CKFinder集成演示并阅读更多信息，请访问 CKFinder集成指南。

You can also enable full integration with CKFinder's client-side file manager. Check out the CKFinder integration demos and read more in the CKFinder integration guide.

对于简易图像服务是 CKEditor云服务。

您需要设置云服务帐户，一旦你创建了一个令牌端点，配置编辑器使用它：

You need to set up a Cloud Services account and once you created a token endpoint configure the editor to use it:

ClassicEditor
    .create( editorElement, {
        cloudServices: {
            tokenUrl: 'https://example.com/cs-token-endpoint',
            uploadUrl: 'https://your-organization-id.cke-cs.com/easyimage/upload/'
        }
    } )
    .then( ... )
    .catch( ... );

免责声明：这些是专有服务。

您还可以编写自己的上传适配器，它将发送文件以你想要的方式服务器（或者你想发送它们的地方）。

You can also write your own upload adapter which will send files in the way you want to your server (or wherever you like to send them).

参见自定义图像上传适配器指南，了解如何实现它。

See Custom image upload adapter guide to learn how to implement it.

示例（即没有内置安全性）上传适配器可以看起来像这样：

An example (i.e. with no security built-in) upload adapter can look like this:

class MyUploadAdapter {
    constructor( loader ) {
        // CKEditor 5's FileLoader instance.
        this.loader = loader;

        // URL where to send files.
        this.url = 'https://example.com/image/upload/path';
    }

    // Starts the upload process.
    upload() {
        return new Promise( ( resolve, reject ) => {
            this._initRequest();
            this._initListeners( resolve, reject );
            this._sendRequest();
        } );
    }

    // Aborts the upload process.
    abort() {
        if ( this.xhr ) {
            this.xhr.abort();
        }
    }

    // Example implementation using XMLHttpRequest.
    _initRequest() {
        const xhr = this.xhr = new XMLHttpRequest();

        xhr.open( 'POST', this.url, true );
        xhr.responseType = 'json';
    }

    // Initializes XMLHttpRequest listeners.
    _initListeners( resolve, reject ) {
        const xhr = this.xhr;
        const loader = this.loader;
        const genericErrorText = 'Couldn\'t upload file:' + ` ${ loader.file.name }.`;

        xhr.addEventListener( 'error', () => reject( genericErrorText ) );
        xhr.addEventListener( 'abort', () => reject() );
        xhr.addEventListener( 'load', () => {
            const response = xhr.response;

            if ( !response || response.error ) {
                return reject( response && response.error ? response.error.message : genericErrorText );
            }

            // If the upload is successful, resolve the upload promise with an object containing
            // at least the "default" URL, pointing to the image on the server.
            resolve( {
                default: response.url
            } );
        } );

        if ( xhr.upload ) {
            xhr.upload.addEventListener( 'progress', evt => {
                if ( evt.lengthComputable ) {
                    loader.uploadTotal = evt.total;
                    loader.uploaded = evt.loaded;
                }
            } );
        }
    }

    // Prepares the data and sends the request.
    _sendRequest() {
        const data = new FormData();

        data.append( 'upload', this.loader.file );

        this.xhr.send( data );
    }
}

然后可以这样启用：

function MyCustomUploadAdapterPlugin( editor ) {
    editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
        return new MyUploadAdapter( loader );
    };
}

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        extraPlugins: [ MyCustomUploadAdapterPlugin ],

        // ...
    } )
    .catch( error => {
        console.log( error );
    } );

注意：以上只是一个示例上传适配器。因此，它没有内置的安全机制（例如CSRF保护）。

NOTE: The above is just an example upload adapter. As such, it does not have security mechanisms built-in (such as CSRF protection).

这篇关于如何在CKEditor 5中启用图像上传支持？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！