How to make hcard.js work with Angular 2 and CKEditor 5

Question

Until now I have used CKEditor 4 with their drag and drop solution of contacts. It works fine. Now I have added the CKEditor 5 to my Angular 2+ solution. The editor is up and running, but I cant't wrap my head around how to get the Widget/Hcard (drag and drop) thing to work with angular and ckeditor 5.

I have spent a lot of time trying to figure this out and really need some help getting this to work.

This is their example site with the drag and drop: https://ckeditor.com/docs/ckeditor5/latest/features/drag-drop.html

If anyone is able to recreate this example page as an Angular soulution in stackblitz, or similar, to show that it is actually possible to make their example of dragging and dropping contacts work, I would be forever grateful.

Answer 1

In order to reuse this feature in Angular project you need to make sure to use import from ckeditor5 instead of @ckeditor/* imports.

Then you need to convert hcard.js from example to hcard.ts and assign this plugin to buildInPlugins

import {
  ClassicEditor as ClassicEditorBase,
} from 'ckeditor5';
import { HCardEditing } from './hcard';

...
export class ClassicEditor extends ClassicEditorBase {
  static override builtinPlugins = [...defaultPlugins, HCardEditing];

  static override defaultConfig = defaultConfig;
}

Finally, in editor component you need to use this extended ClassicEditor:

component.ts

export class AppComponent {
  public Editor = ClassicEditor;

template.html

<ckeditor [editor]="Editor" [data]="html"></ckeditor>

Stackblitz Example