CKEditor Перетащите с Angular 7

Question

Я хотел бы использовать CKEditor и перетаскивать с Angular 7. Они успешно делают это на своем сайте, но я не могу найти какие-либо решения Angular для этого. Как вы видите здесь:

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

Но у меня проблемы с преобразованием этого компонента в Angular 7. Мой код:

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'
    });

  }

}

Используется так:

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

Если я попробую это, this.editor не будет содержать никаких свойств, которые я ожидал. Который вы найдете здесь: https://ckeditor.com/docs/ckeditor5/latest/api/module_editor-classic_classiceditor-ClassicEditor.html

Итак, кто-нибудь знает, как заставить Angular работать с Angular 7 и CKEditor?

Answer 1

Да, вы можете использовать Angular 7 и CKEditor5 и пользовательскую директиву. Вы можете создать директиву перетаскивания и «перетаскивать» данные в документ редактора.

См. Ниже пример директивы о перетаскивании: https://threeventures.com/build-html-drag-drop-angular/ https://github.com/ThreeVenturesTechnology/angular-drag-and-drop