如何進行 CKEditor 5 圖片上傳？

Question

ClassicEditor
    .create( editorElement, {
        ckfinder: {
            uploadUrl: 'my_server_url'
        }
    } )
    .then( ... )
    .catch( ... );

我的服務器響應應該是什么？ 我在后端使用 Java。 無論我的反應是什么，它都會拋出一個對話框“無法上傳文件”。

Answer 1

成功回復：

{
    "uploaded": true,
    "url": "http://127.0.0.1/uploaded-image.jpeg"
}

失敗響應：

{
    "uploaded": false,
    "error": {
        "message": "could not upload this image"
    }
}

Answer 2

class UploadAdapter {
  constructor( loader ) {
    this.loader = loader;
    this.upload = this.upload.bind(this)
    this.abort = this.abort.bind(this)
  }

  upload() {
    const data = new FormData();
    data.append('typeOption', 'upload_image');
    data.append('file', this.loader.file);

    return axios({
        url: `${API}forums`,
        method: 'post',
        data,
        headers: {
          'Authorization': tokenCopyPaste()
        },
        withCredentials: true
      }).then(res => {
        console.log(res)
        var resData = res.data;
        resData.default = resData.url;
        return resData;
      }).catch(error => {
        console.log(error)
        return Promise.reject(error)
      });
  }

  abort() {
    // Reject promise returned from upload() method.
  }
}               
<CKEditor
  editor={ ClassicEditor }
  data="<p>Hello from CKEditor 5!</p>"
  config={{}}
  onInit={ editor => {
    editor.ui.view.editable.element.style.height = '200px';
    editor.plugins.get( 'FileRepository' ).createUploadAdapter = function( loader ) {
      return new UploadAdapter( loader );
    };
  } }
  onChange={ ( event, editor ) => {
    console.log(editor.getData())
  } }
/>

Answer 3

這是我的 Ckeditor 5 和 Phalcon 框架的代碼。#products_desc 指向 textarea id。

<script>

var myEditor;

ClassicEditor
.create( document.querySelector( '#products_desc' ) ,
{
    ckfinder: {
        uploadUrl: 'Ckfinder/upload'
    }
}
)
.then( editor => {
    console.log( 'Editor was initialized', editor );
    myEditor = editor;
} )
.catch( err => {
    console.error( err.stack );
} );</script>

和我的 php 控制器：

 <?php
 use Phalcon\Mvc\Controller;

 class CkfinderController extends Controller
 {

    public function uploadAction()
  {

   try {
    if ($this->request->hasFiles() == true) {
        $errors = []; // Store all foreseen and unforseen errors here
        $fileExtensions = ['jpeg','jpg','png','gif','svg'];
        $uploadDirectory = "../public/Uploads/";
        $Y=date("Y");
        $M=date("m");
           foreach ($this->request->getUploadedFiles() as $file) {
        if (in_array($file->getExtension(),$fileExtensions)) {
           if($file->getSize()<2000000) 
           {

            if (!file_exists($uploadDirectory.$Y)) {
                mkdir($uploadDirectory.$Y, 0777, true);
            }
            if (!file_exists($uploadDirectory.$Y.'/'.$M)) {
                mkdir($uploadDirectory.$Y.'/'.$M, 0777, true);
            }
            $namenew=md5($file->getName().time()).'.'.$file->getExtension();
            $uploadDirectory .=$Y.'/'.$M.'/'; 
            $file->moveTo($uploadDirectory.$namenew);
           }
           else{
            $errors[] = "This file is more than 2MB. Sorry, it has to be less than or equal to 2MB";
           }
        }
        else{$errors[] = "This file extension is not allowed. Please upload a JPEG ,svg,gif,,jpg,PNG file";}

    if(empty($errors))
    {   
       echo '{
        "uploaded": true,
        "url": "http://localhost/cms/public/Uploads/'.$Y.'/'.$M.'/'.$namenew.'"}';
    }
    else{
        echo '{
        "uploaded": false,
        "error": {
            "message": "could not upload this image1"
        }';}
    }
}
else{
    echo '{
    "uploaded": false,
    "error": {
        "message": "could not upload this image1"
    }';}
}
catch (\Exception $e) {
       echo '{
        "uploaded": false,
        "error": {
            "message": "could not upload this image0"
        }';
   }
  }

 }
 ?>

Answer 4

我在 React 中的做法應該是相似的。 我有自定義上傳器。

UploadAdapter.js

// Custom Upload Adapter
export class UploadAdapter {
  constructor(loader) {
    this.loader = loader
  }

  async upload() {
    return this.loader.file.then((file) => {
      const data = new FormData()
      data.append("file", file)
      const genericError = `Couldn't upload file: ${file.name}.`

      return axios({
        data,
        method: "POST",
        url: "API_UPLOAD_URL",
        headers: {
          "Content-Type": "multipart/form-data",
        },
        onUploadProgress: (progressEvent) => {
          loader.uploadTotal = progressEvent.total
          loader.uploaded = progressEvent.loaded
          const uploadPercentage = parseInt(
            Math.round((progressEvent.loaded / progressEvent.total) * 100)
          )
        },
      })
        .then(({ data }) => ({ default: data.url }))
        .catch(({ error }) => Promise.reject(error?.message ?? genericError))
    })
  }

  abort() {
    return Promise.reject()
  }
}

// CKEditor FileRepository
export function uploadAdapterPlugin(editor) {
  editor.plugins.get("FileRepository").createUploadAdapter = (loader) =>
    new UploadAdapter(loader)
}

使用上述：

const CustomEditor = () => (
  <CKEditor
    editor={ClassicEditor}
    data="<p>Hello from CKEditor 5!</p>"
    config={{}}
    onInit={(editor) => {
      editor.ui.view.editable.element.style.height = "200px"
      uploadAdapterPlugin(editor)
    }}
    onChange={(event, editor) => {
      console.log(editor.getData())
    }}
  />
)

Answer 5

ckfinder.uploadUrl屬性配置CKFinderUploadAdapter插件。 該插件負責與CKFinder 的服務器端連接器進行通信。

因此，換句話說，您的服務器應該運行 CKFinder 的服務器端連接器。 這是一個專有軟件，所以我不會深入探討它的工作原理。

如果您想了解配置圖片上傳的所有方法，請閱讀如何在 CKEditor 5 中啟用圖片上傳支持？ .

Answer 6

可以配置CKEditor上傳文件

ClassicEditor.create( document.querySelector( '#editor' ), {

    cloudServices: {

        tokenUrl: 'https://example.com/cs-token-endpoint',

        uploadUrl: 'https://your-organization-id.cke-cs.com/easyimage/upload/'

    }

} )

.then( ... )

.catch( ... );

有關更多詳細信息，請訪問此鏈接： https://docs.ckeditor.com/ckeditor5/latest/features/image-upload.html

Answer 7

快速開始

npm install --save @ckeditor/ckeditor5-angular

安裝一個正式的編輯器版本或創建一個自定義的版本。

假設您選擇了@ ckeditor / ckeditor5-build-classic：

npm install --save @ckeditor/ckeditor5-build-classic

現在，將CKEditorModule添加到您的應用程序模塊導入中：

import { CKEditorModule } from '@ckeditor/ckeditor5-angular';

@NgModule( {    

imports: [        

CKEditorModule,        

// ...    ],   

 // ... } )

ckeditorEx.html：

  <ckeditor  [config]="editorConfig" [editor]="Editor" [(ngModel)]="description"

  #desc="ngModel" spellcheck="false" required minlength="50" name="editor5" (ready)="onReady($event)">

 </ckeditor>

component.ts

onReady($event) {


$event.plugins.get('FileRepository').createUploadAdapter = (loader) => {

 return new MyUploadAdapter(loader);

};

我已經在我的一個項目中做到了這一點，並且已經在我的博客https://www.stackquery.com/articles/how-to-implement-ckeditor5-in-angular-and-upload中發布了有關此主題的教程-image-to-asp-net-core-web-api / 60e91802-94ed-430d-ab5e-66c33f9babb7本教程提供了逐步說明，以及有關如何通過圖像上傳實現CKEditor5的完整實現。