problem in Using Drag And Drop in CkEditor5 Angular

[Majidmehrab]

I use CkEditor5 according to this link In the list of contacts, I want to apply drag and drop, but it does not work properly,

It seems that this link does not properly explain how to call drag and drop
And I don't know what to do

Is there a specific format or data to be applied in the e.dataTransfer.setData() method to drag and drop?

Does the onDrop event in CkEditor5 need a special command?

please guide me

Thanks

For Example

index.html

<!-- ... -->
<ckeditor *ngIf="loaded" class="editor-dragable" draggable="true" [config]="ckeditorConfig" [editor]="Editor" ngModel)]="model.ckEditoData" name="ckEditoData"></ckeditor>
  <ul class="paramsContainer row align-items-center">
      <li *ngFor="let item of items;let index = index">
          <div class="dragable params" [attr.data-contact]="index" [id]="'drag'+index" draggable="true">
             {{item.name}}
           </div>
      </li>
  </ul>
<!-- ... -->

index.ts

 items:any = [
     {
         name: 'Test 1',
         id: 1,
     },
      ...
 ];
 ckeditorConfig: any = {
    placeholder: 'write something',
 };

 Editor = ClassicEditor;

model:any={}

package.json

"dependencies":{
     ...
     "@angular/cli": "^11.2.1",
     "@ckeditor/ckeditor5-angular": "4.0.0",
     "@ckeditor/ckeditor5-clipboard": "^35.1.0",
     "@ckeditor/ckeditor5-build-classic": "^35.1.0",
     ...
}

[fostom]

Did you get this to work?

[Witoso]

Here's the demo of drag and drop into the editor.

Below it, you will find example code:

The source code of the above snippet is available here: drag-drop.js, drag-drop.html.

[fostom]

Hi Witoso

Have you actually tried to use the snippets (drag-drop.js/drag-drop.html) for CKEditor 5? I am sorry to say that it doesn't work. If you set it up as a pure javascript solution, like I guess you do on the demopage, all it does is to paste the text of the contact. Not like in the demo where it also paste the hcard widget. If you add it in an Angular solution you will get exactly what you see in the video added by [Majidmehrab]. Where you drag the hcard element over to the editor and nothing happens. It doesn't even copy the text (Alice, Hucleberry Finn etc). Kinda frustrating.

I have asked support at CKEditor, about five times, if drag and drop actually works with Angular and the answer I get is: "meh, not sure but we belive it should work.". Then they just refer to the demo page like you did and the two files. An actual demo would be great. This one is just linking to drag-drop.js and drag-drop.html and says "good luck making this work". which doesn't do any good in an Angular solution.

Btw, in the old CKEditor 4 everything works fine. But we want to use the CKEditor 5.

[Witoso]

Sorry for the experience so far!

Have you actually tried to use the snippets (drag-drop.js/drag-drop.html) for CKEditor 5?

Yes, this is actually the snippet that runs on this page.

all it does is to paste the text of the contact

Notice that the styles need to be added as well:

https://github.com/ckeditor/ckeditor5/blob/53eb40d811d78e3dac74a4b4641a33635343582d/packages/ckeditor5-clipboard/docs/_snippets/features/drag-drop.html#L67-L88

Notice that our solution relies on the content of the clipboard:

https://github.com/ckeditor/ckeditor5/blob/53eb40d811d78e3dac74a4b4641a33635343582d/packages/ckeditor5-clipboard/docs/_snippets/features/drag-drop.js#L94-L107

You need to check how Angular (not sure if it's some library or a default behavior) sets the content in the clipboard on the dragging. Drag is underneath almost copy/paste, it's possible that the editor is not recognizing the markup dropped, and is not accepting it.