如何在CKEditor 5中启用图像上传支持？

我将在我的项目中使用 ckeditor v5。我尝试使用图像插件，但没有找到足够的信息。

如果你看到德莫here，您可以通过拖放轻松上传图像。但是，当我尝试使用下载 ballon zip 进行拖放图像时，没有任何反应。也没有错误。

有没有办法在可下载的变体中使用此图像支持？

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

您可以阅读官方的更多内容图片上传指南或查看下面可用选项的简短摘要。

官方上传适配器

有两个内置适配器：

• For CKFinder这需要您在服务器上安装 CKFinder 连接器。

  在服务器上安装连接器后，您可以通过设置 CKEditor 将文件上传到该连接器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 集成 guide.

• For the 简单图像服务是其中的一部分CKEditor云服务.

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

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

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

自定义上传适配器

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

See 自定义图像上传适配器指南以了解如何实施它。

上传适配器示例（即没有内置安全性）如下所示：

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

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