web-dev-qa-db-fra.com

Comment faire pour télécharger des images CKEditor 5?

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

Quelle devrait être ma réponse du serveur? J'utilise Java dans le backend . Quelle que soit ma réponse, une boîte de dialogue "Impossible de télécharger le fichier" s'affiche.

ckeditorckeditor5
3
Palaniappan RM

Réponse de réussite:

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

Réponse d'échec:

{
    "uploaded": false,
    "error": {
        "message": "could not upload this image"
    }
}
9
Ganesh prajapati
class UploadAdapter {
  constructor( loader ) {
    this.loader = loader;
  }

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

    return new Promise((resolve, reject) => {
      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;
        resolve(resData);
      }).catch(error => {
        console.log(error)
        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.editableElement.style.height = '200px';
    editor.plugins.get( 'FileRepository' ).createUploadAdapter = function( loader ) {
      return new UploadAdapter( loader );
    };
  } }
  onChange={ ( event, editor ) => {
    console.log(editor.getData())
  } }
/>
1
slam24

Vous pouvez configurer CKEditor pour télécharger des fichiers 

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( ... );

Pour plus de détails, visitez ce lien:  https://docs.ckeditor.com/ckeditor5/latest/features/image-upload.html

0
Ershad Munsuri

voici mon code pour Ckeditor 5 et le framework Phalcon. # products_desc pointe sur 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>

et mon contrôleur 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"
        }';
   }
  }

 }
 ?>
0
reza jafari

La propriété ckfinder.uploadUrl configure le plugin CKFinderUploadAdapter . Ce plugin est responsable de la communication avec le connecteur côté serveur de CKFinder .

En d'autres termes, votre serveur doit donc exécuter le connecteur côté serveur de CKFinder. Il s’agit d’un logiciel propriétaire, je ne vais donc pas en dire plus sur son fonctionnement.

Si vous souhaitez en savoir plus sur tous les moyens de configurer le téléchargement d'images, veuillez lire Comment activer la prise en charge du téléchargement d'images dans CKEditor 5? .

0
Reinmar