如何使 hcard.js 与 Angular 2 和 CKEditor 5 一起使用

Question

到目前为止，我一直使用 CKEditor 4 及其拖放联系人解决方案。效果很好。现在我已将 CKEditor 5 添加到我的 Angular 2+ 解决方案中。编辑器已启动并运行，但我无法理解如何让 Widget/Hcard（拖放）与 Angular 和 ckeditor 5 一起使用。

我花了很多时间试图解决这个问题，并且确实需要一些帮助才能使其发挥作用。

这是他们的拖放示例站点：https://ckeditor.com/docs/ckeditor5/latest/features/drag-drop.html

如果有人能够在 stackblitz 或类似的中将这个示例页面重新创建为 Angular 解决方案，以表明实际上可以使他们的拖放联系人示例正常工作，我将永远感激不已。

Answer 1

为了在 Angular 项目中重用此功能，您需要确保使用从

ckeditor5

导入而不是

@ckeditor/*

导入。

然后您需要将示例中的

hcard.js

转换为

hcard.ts

并将此插件分配给

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

最后，在编辑器组件中你需要使用这个扩展

ClassicEditor

：

组件.ts

export class AppComponent {
  public Editor = ClassicEditor;

模板.html

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

Stackblitz 示例