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

时间:2017-10-16 07:39:56

标签: javascript ckeditor ckeditor5

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

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

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

6 个答案:

答案 0 :(得分:14)

是的,图片上传包含在所有可用版本中。但是,为了使其工作,您需要配置一个现有的上载适配器或编写自己的上载适配器。简而言之,上传适配器是一个简单的类,其作用是将文件发送到服务器(以任何方式),并在完成后解析返回的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 ImageCKEditor 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保护)。

答案 1 :(得分:3)

对我来说很好。感谢所有答案。这是我的实现。


myUploadAdapter.ts

import { environment } from "./../../../environments/environment";

export class MyUploadAdapter {
  public loader: any;
  public url: string;
  public xhr: XMLHttpRequest;
  public token: string;

  constructor(loader) {
    this.loader = loader;

    // change "environment.BASE_URL" key and API path
    this.url = `${environment.BASE_URL}/api/v1/upload/attachments`;

    // change "token" value with your token
    this.token = localStorage.getItem("token");
  }

  upload() {
    return new Promise(async (resolve, reject) => {
      this.loader.file.then((file) => {
        this._initRequest();
        this._initListeners(resolve, reject, file);
        this._sendRequest(file);
      });
    });
  }

  abort() {
    if (this.xhr) {
      this.xhr.abort();
    }
  }

  _initRequest() {
    const xhr = (this.xhr = new XMLHttpRequest());
    xhr.open("POST", this.url, true);

    // change "Authorization" header with your header
    xhr.setRequestHeader("Authorization", this.token);

    xhr.responseType = "json";
  }

  _initListeners(resolve, reject, file) {
    const xhr = this.xhr;
    const loader = this.loader;
    const genericErrorText = "Couldn't upload file:" + ` ${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
        );
      }

      // change "response.data.fullPaths[0]" with image URL
      resolve({
        default: response.data.fullPaths[0],
      });
    });

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

  _sendRequest(file) {
    const data = new FormData();

    // change "attachments" key
    data.append("attachments", file);

    this.xhr.send(data);
  }
}


component.html

<ckeditor
  (ready)="onReady($event)"
  [editor]="editor"
  [(ngModel)]="html"
></ckeditor>

component.ts

import { MyUploadAdapter } from "./myUploadAdapter";
import { Component, OnInit } from "@angular/core";
import * as DecoupledEditor from "@ckeditor/ckeditor5-build-decoupled-document";

@Component({
  selector: "xxx",
  templateUrl: "xxx.html",
})
export class XXX implements OnInit {
  public editor: DecoupledEditor;
  public html: string;

  constructor() {
    this.editor = DecoupledEditor;
    this.html = "";
  }

  public onReady(editor) {
    editor.plugins.get("FileRepository").createUploadAdapter = (loader) => {
      return new MyUploadAdapter(loader);
    };
    editor.ui
      .getEditableElement()
      .parentElement.insertBefore(
        editor.ui.view.toolbar.element,
        editor.ui.getEditableElement()
      );
  }

  public ngOnInit() {}
}

答案 2 :(得分:1)

我正在搜索有关如何使用此控件的信息,但发现官方文档很少。然而,经过反复尝试,我确实使它能够正常工作,所以我想我会分享。

最后,我将CKEditor 5简单上传适配器与Angular 8结合使用,并且工作正常。但是,您确实需要创建安装了上载适配器的ckeditor的自定义版本。这很容易做到。我假设您已经有了ckeditor Angular文件。

首先,创建一个新的角度项目目录,并将其命名为“ cKEditor-Custom-Build”或类似名称。不要运行ng new(Angular CLI),而是使用npm获取要显示的编辑器的基本版本。对于此示例,我使用的是经典编辑器。

https://github.com/ckeditor/ckeditor5-build-classic

转到github并将项目克隆或下载到新的闪亮构建目录中。

如果您使用VS代码,请打开目录并打开接线盒并获取依赖项:

npm i

现在您已经有了基本的构建,并且需要安装一个上载适配器。 ckEditor有一个。安装此软件包以获取简单的上传适配器:

npm install --save @ckeditor/ckeditor5-upload

..一旦完成,就打开项目中的ckeditor.js文件。它在“ src”目录中。如果您一直在使用ckEditor,那么它的内容应该看起来很熟悉。

将新的js文件导入ckeditor.js文件。此文件中将包含全部导入负载,并将其全部放到最底部。

import SimpleUploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter';

...接下来,将导入添加到您的插件数组中。当我使用经典编辑器时,我的部分称为“ ClassicEditor.builtinPlugins”,将其添加到TableToolbar旁边。就是这样配置。最后不需要其他工具栏或配置。

构建您的ckeditor-custom-build。

npm run build

Angular的魔力将发挥作用,并在您的项目中创建一个“ build”目录。那是为定制构建的。

现在打开您的Angular项目并创建一个目录,以使新版本生效。我实际上把我的放在了资产子目录中,但是它可以在任何可以引用它的地方。

在“ src / assets”中创建一个名为“ ngClassicEditor”的目录,无论它叫什么都无所谓,然后将构建文件复制到其中(您刚刚创建的文件)。接下来,在您要使用编辑器的组件中,添加一个带有新构建路径的import语句。

import * as Editor from '@app/../src/assets/ngClassicEditor/build/ckeditor.js';

快完成了...

最后一点是为上载适配器配置适配器应用于上传图像的API端点。在您的组件类中创建一个配置。

  public editorConfig = {
simpleUpload: {
  // The URL that the images are uploaded to.
  uploadUrl: environment.postSaveRteImage,

  // Headers sent along with the XMLHttpRequest to the upload server.
  headers: {
    'X-CSRF-TOKEN': 'CSFR-Token',
    Authorization: 'Bearer <JSON Web Token>'
  }
}

};

实际上,我在这里使用environment transform,因为URI从dev更改为production,但是如果需要,您可以在其中硬编码一个直接的URL。

最后一部分是在模板中配置编辑器,以使用新的配置值。打开您的component.html并修改您的ckeditor编辑器标签。

     <ckeditor [editor]="Editor" id="editor"  [config]="editorConfig">
      </ckeditor>

就是这样。大功告成测试,测试测试。

我的API是.Net API,如果您需要一些示例代码,很高兴与大家分享。我真的希望这会有所帮助。

答案 3 :(得分:0)

在React

使用MyCustomUploadAdapterPlugin制作新文件

import Fetch from './Fetch'; //my common fetch function 

class MyUploadAdapter {
    constructor( loader ) {
        // The file loader instance to use during the upload.
        this.loader = loader;
    }

    // Starts the upload process.
    upload() {
        return this.loader.file
            .then( file => new Promise( ( resolve, reject ) => {

                const toBase64 = file => new Promise((resolve, reject) => {
                    const reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = () => resolve(reader.result);
                    reader.onerror = error => reject(error);
                });
                
                return toBase64(file).then(cFile=>{
                    return  Fetch("admin/uploadimage", {
                        imageBinary: cFile
                    }).then((d) => {
                        if (d.status) {
                            this.loader.uploaded = true;
                            resolve( {
                                default: d.response.url
                            } );
                        } else {
                            reject(`Couldn't upload file: ${ file.name }.`)
                        }
                    });
                })
                
            } ) );
    }

   
}

// ...

export default function MyCustomUploadAdapterPlugin( editor ) {
    editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
        // Configure the URL to the upload script in your back-end here!
        return new MyUploadAdapter( loader );
    };
}

import MyCustomUploadAdapterPlugin from '../common/ckImageUploader';
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';



  <CKEditor
         editor={ClassicEditor}
         data={quesText}
         placeholder="Question Text"
         config={{extraPlugins:[MyCustomUploadAdapterPlugin]}} //use
  />

答案 4 :(得分:0)

我使用了这个配置:

public editorConfig = {
 simpleUpload: {
 uploadUrl: environment.postSaveRteImage,
 headers: {
'X-CSRF-TOKEN': 'CSFR-Token',
 Authorization: 'Bearer <JSON Web Token>'
 }
 }

图片上传成功,响应为{"url": "image-url"}。 但在前端 ckeditor 的警报中说

<块引用>

无法上传文件:未定义。

答案 5 :(得分:0)

对于遇到 XHR 问题的人,您也可以使用 fetch api,这似乎工作正常

      constructor(loader) {
      // The file loader instance to use during the upload.
      this.loader = loader;
      this.url = '/upload';
    }

    request(file) {
      return fetch(this.url, { // Your POST endpoint
        method: 'POST',
        headers: {
          'x-csrf-token': _token
        },
        body: file // This is your file object
      });
    }

upload() {
        const formData = new FormData();

        this.loader.file.then((filenew) => {
          console.log(filenew);
          formData.append('file', filenew, filenew.name);
  
          return new Promise((resolve, reject) => {
            this.request(formData).then(
             response => response.json() // if the response is a JSON object
           ).then(
             success => console.log(success) // Handle the success response object
           ).catch(
             error => console.log(error) // Handle the error response object
           );
        })
      });
    }