CKEditor 使用 Angular 7 拖放

Question

I would like to use the CKEditor and drag and drop with Angular 7. They do it with success on their site but I Can't seem to find any Angular solutions for this. As you see here:

https://ckeditor.com/docs/ckeditor4/latest/examples/draganddrop.html

But I have trouble converting this to Angular 7 component. My code is:

import { Component, OnInit } from '@angular/core';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

@Component({
  selector: 'xxxx',
  templateUrl: 'xxxxx',
  styleUrls: ['xxxxx']
})
export class NyttInnholdComponent implements OnInit {

  public editor = ClassicEditor;

  public contacts = [];

  public model = {
        editorData: '<p>Tommy says, Hello!</p>'
    };

  constructor() { 
    this.contacts = [{
        name: 'Huckleberry Finn',
        tel: '+48 1345 234 235',
        email: 'h.finn@example.com',
        avatar: 'hfin'
      },
      {
        name: 'D\'Artagnan',
        tel: '+45 2345 234 235',
        email: 'dartagnan@example.com',
        avatar: 'dartagnan'
      },
      {
        name: 'Phileas Fogg',
        tel: '+44 3345 234 235',
        email: 'p.fogg@example.com',
        avatar: 'pfog'
      },
      {
        name: 'Alice',
        tel: '+20 4345 234 235',
        email: 'alice@example.com',
        avatar: 'alice'
      },
      {
        name: 'Little Red Riding Hood',
        tel: '+45 2345 234 235',
        email: 'lrrh@example.com',
        avatar: 'lrrh'
      }
    ];


  }

  ngOnInit() {
    //this.teswt ();
    this.editor.disableAutoInline = true;


    this.editor.plugins.add('hcard', {
      requires: 'widget',

      init: function(editor) {
        editor.widgets.add('hcard', {
          allowedContent: 'span(!h-card); a[href](!u-email,!p-name); span(!p-tel)',
          requiredContent: 'span(h-card)',
          pathName: 'hcard',

          upcast: function(el) {
            return el.name == 'span' && el.hasClass('h-card');
          }
        });

        // This feature does not have a button, so it needs to be registered manually.
        editor.addFeature(editor.widgets.registered.hcard);

        // Handle dropping a contact by transforming the contact object into HTML.
        // Note: All pasted and dropped content is handled in one event - editor#paste.
        editor.on('paste', function(evt) {
          var contact = evt.data.dataTransfer.getData('contact');
          if (!contact) {
            return;
          }

          evt.data.dataValue =
            '<span class="h-card">' +
            '<a href="mailto:' + contact.email + '" class="p-name u-email">' + contact.name + '</a>' +
            ' ' +
            '<span class="p-tel">' + contact.tel + '</span>' +
            '</span>';
        });
      }
    });

    this.editor.on('instanceReady', function() {
      // When an item in the contact list is dragged, copy its data into the drag and drop data transfer.
      // This data is later read by the editor#paste listener in the hcard plugin defined above.
      this.editor.document.getById('contactList').on('dragstart', function(evt) {
        // The target may be some element inside the draggable div (e.g. the image), so get the div.h-card.
        var target = evt.data.getTarget().getAscendant('div', true);

        // Initialization of the CKEditor data transfer facade is a necessary step to extend and unify native
        // browser capabilities. For instance, Internet Explorer does not support any other data type than 'text' and 'URL'.
        // Note: evt is an instance of CKEDITOR.dom.event, not a native event.
        this.editor.plugins.clipboard.initDragDataTransfer(evt);

        var dataTransfer = evt.data.dataTransfer;

        // Pass an object with contact details. Based on it, the editor#paste listener in the hcard plugin
        // will create the HTML code to be inserted into the editor. You could set 'text/html' here as well, but:
        // * It is a more elegant and logical solution that this logic is kept in the hcard plugin.
        // * You do not know now where the content will be dropped and the HTML to be inserted
        // might vary depending on the drop target.
        dataTransfer.setData('contact', this.contacts[target.data('contact')]);

        // You need to set some normal data types to backup values for two reasons:
        // * In some browsers this is necessary to enable drag and drop into text in the editor.
        // * The content may be dropped in another place than the editor.
        dataTransfer.setData('text/html', target.getText());

        // You can still access and use the native dataTransfer - e.g. to set the drag image.
        // Note: IEs do not support this method... :(.
        if (dataTransfer.$.setDragImage) {
          dataTransfer.$.setDragImage(target.findOne('img').$, 0, 0);
        }
      });
    });

    // Initialize the editor with the hcard plugin.
    this.editor.inline('editor1', {
      extraPlugins: 'hcard,sourcedialog,justify'
    });

  }

}

Used like this:

<ckeditor [(ngModel)]="model.editorData" [editor]="editor"></ckeditor>

If I try this the this.editor will not contain any of the properties I was expecting. Which you find here: https://ckeditor.com/docs/ckeditor5/latest/api/module_editor-classic_classiceditor-ClassicEditor.html

So, anyone know how I can get Angular to work with Angular 7 and CKEditor?

Answer 1

Yes you can use Angular 7 and CKEditor5 and a Custom Directive. You can create a Drag Directive and "drag and drop" data onto the Editor Document.

See the below for an example of a Drag Directive: https://threeventures.com/build-html-drag-drop-angular/ https://github.com/ThreeVenturesTechnology/angular-drag-and-drop

Answer 2

There are two options:

1. Use a div instead of the Angular CKEditor control.
2. Binding your CKEditor to the built-in drop and dragover events.

Option 1 -Use a div instead of the Angular CKEditor control.

Your template would look something like this.

<div cols="10" id="editor1" name="editor1" rows="10" data-sample-short contenteditable="true" >
</div>

Then your typescript would look somethign like

  ngOnInit(): void {

    CKEDITOR.plugins.add('hcard', {
      requires: 'widget',

      init(editor): void {
        editor.widgets.add('hcard', {
          allowedContent: 'span(!h-card); a[href](!u-email,!p-name); span(!p-tel)',
          requiredContent: 'span(h-card)',
          pathName: 'hcard',

          upcast: (el) => {
            return el.name === 'span' && el.hasClass('h-card');
          }
        });

        // This feature does not have a button, so it needs to be registered manually.
        editor.addFeature(editor.widgets. registered.hcard);

        // Handle dropping a contact by transforming the contact object into HTML.
        // Note: All pasted and dropped content is handled in one event - editor#paste.
        editor.on('paste', (evt) => {
          const contact = evt.data.dataTransfer.getData('contact');
          if (!contact) {
            return;
          }

          evt.data.dataValue =
            '<span class="h-card">' +
            '<a href="mailto:' + contact.email + '" class="p-name u-email">' + contact.name + '</a>' +
            ' ' +
            '<span class="p-tel">' + contact.tel + '</span>' +
            '</span>';
        });
      }
    });

    CKEDITOR.replace( 'editor1', {
      extraPlugins: 'hcard, sourcedialog',
        toolbar: [
          { name: 'basicstyles', items: [ 'Bold', 'Italic' ] },
          { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', '-', 'Undo', 'Redo' ] },
          { name: 'document', items: ['Source'] }
        ],
        allowedContent: true,
        fullPage: true,
        height: '500px'
    });

    CKEDITOR.on('instanceReady', (event) => {
      // When an item in the contact list is dragged, copy its data into the drag and drop data transfer.
      // This data is later read by the editor#paste listener in the hcard plugin defined above.
      CKEDITOR.document.getById('contactList').on('dragstart', (evt) => {
        // The target may be some element inside the draggable div (e.g. the image), so get the div.h-card.
        const target = evt.data.getTarget().getAscendant('div', true);

        // Initialization of the CKEditor 4 data transfer facade is a necessary step to extend and unify native
        // browser capabilities. For instance, Internet Explorer does not support any other data type than 'text' and 'URL'.
        // Note: evt is an instance of CKEDITOR.dom.event, not a native event.
        CKEDITOR.plugins.clipboard.initDragDataTransfer(evt);

        const dataTransfer = evt.data.dataTransfer;

        // Pass an object with contact details. Based on it, the editor#paste listener in the hcard plugin
        // will create the HTML code to be inserted into the editor. You could set 'text/html' here as well, but:
        // * It is a more elegant and logical solution that this logic is kept in the hcard plugin.
        // * You do not know now where the content will be dropped and the HTML to be inserted
        // might vary depending on the drop target.
        dataTransfer.setData('contact', this.CONTACTS[target.data('contact')]);

        // You need to set some normal data types to backup values for two reasons:
        // * In some browsers this is necessary to enable drag and drop into text in the editor.
        // * The content may be dropped in another place than the editor.
        dataTransfer.setData('text/html', target.getText());

        // You can still access and use the native dataTransfer - e.g. to set the drag image.
        // Note: IEs do not support this method... :(.
        if (dataTransfer.$.setDragImage) {
          dataTransfer.$.setDragImage(target.findOne('img').$, 0, 0);
        }
      });

    });
  }

Source code (Angular 10): https://github.com/steve-giles/ckeditorApp

Option 2 - Binding your CKEditor to the built-in drop and dragover events.

The problem with this approach is that you can only perform drag and drop in source view.

Your template would look something like this.

<ckeditor [(ngModel)]="model.editorData" [editor]="editor" (drop)="drop($event)"
          (dragover)="allowDrop($event)"></ckeditor>

Then in your typescript add the code for drop and drag where "text" is a reference to the element your dragging.

  allowDrop(ev): void {
    ev.preventDefault();
  }

  drag(ev): void {
    ev.dataTransfer.setData('text', ev.target.id);
  }

Finally add code to update the CKEditor with your text. In this example I'm using "getElementById" but a better approach would be to use Angular binding. Note that for this to work, the user needs to set focus in the editor to where the element will be dropped.

  drop(ev): void {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    var newValue = document.getElementById(data).textContent;

    var startPos = ev.target.selectionStart;
    var endPos = ev.target.selectionEnd;

    ev.target.value = ev.target.value.substring(0, startPos)
      + newValue 
      + ev.target.value.substring(endPos, ev.target.value.length);
  }

Source code (Angular 10): https://github.com/steve-giles/draganddrop

Answer 3

After a lot of work around and document search. The easiest way to drag and drop the external text/html that I have achieved using Ckeditor5 decoupled document editor and Angular 10. The example below and reference link Where are the editor.insertHtml() and editor.insertText() methods? How to insert some content?

app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, CKEditorModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

app.component.ts

import { Component } from '@angular/core';
import * as DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  public Editor = DecoupledEditor;
  editorInstance;
  public data = {
    editorData: '<p>Hello, world!</p>',
  };

  fieldMap: Map<string, string> = new Map<string, string>([
    ['studentFirstName', '{{ student.firstName }}'],
    ['studentLastName', '{{ student.lastName }}'],
    ['courseName', '{{ course.name }}'],
    ['courseHours', '{{ course.hours }}'],
  ]);

  constructor() {}

  ngOnInit() {}

  public onReady(editor) {
    editor.ui
      .getEditableElement()
      .parentElement.insertBefore(
        editor.ui.view.toolbar.element,
        editor.ui.getEditableElement()
      );
    this.editorInstance = editor;
  }

  allowDrop(ev): void {
    ev.preventDefault();
  }

  drag(ev): void {
    console.log('drage', ev.target);
    ev.dataTransfer.setData('dragElement', ev.target.id);
  }

  drop(ev): void {
    ev.preventDefault();
    const data = ev.dataTransfer.getData('dragElement');
    const dataValue = this.fieldMap.get(data);
    const viewFragment = this.editorInstance.data.processor.toView(dataValue);
    const modelFragment = this.editorInstance.data.toModel(viewFragment);
    this.editorInstance.model.insertContent(modelFragment);
  }
}

app.component.html

<ckeditor [editor]="Editor"  [data]="data.editorData" (ready)="onReady($event)"
          (drop)="drop($event)"
          (dragover)="allowDrop($event)">
</ckeditor>

Student
<ul>
  <li id="studentFirstName" draggable="true" (dragstart)="drag($event)">First name</li>
  <li id="studentLastName" draggable="true" (dragstart)="drag($event)">Last name</li>
</ul>

Course
<ul>
  <li id="courseName" draggable="true" (dragstart)="drag($event)">Name</li>
  <li id="courseHours" draggable="true" (dragstart)="drag($event)">Hours</li>
</ul>