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

Question

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

如果您看到 Demoe here ，您可以使用拖放轻松上传图像。但是当我尝试使用下载气球 zip 尝试拖放图像时，没有任何反应。也没有报错。

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

Answer 1

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

更多内容可以看官方Image upload指导或查看以下可用选项的简短摘要。

官方上传适配器

有两个内置适配器:

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

  在服务器上安装连接器后，您可以通过设置 config.ckfinder.uploadUrl 来配置 CKEditor 将文件上传到该连接器。选项:

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

  您还可以启用与 CKFinder 的客户端文件管理器的完全集成。查看CKFinder integration demos并在 CKFinder integration 中阅读更多内容指导。

• 对于Easy Image属于 CKEditor Cloud Services 的服务.

  您需要set up a Cloud Services account一旦你created a token endpoint配置编辑器以使用它:

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

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

自定义上传适配器

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

参见 Custom image upload adapter指南以了解如何实现它。

一个示例(即没有内置安全性)上传适配器如下所示:

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 保护)。