带有 Angular 的 CKEditor5：注册模型和转换不起作用

问题描述

各位程序员。

使用 ckeditor5 角度组件，我正在尝试添加我自己的模型。唉，我的转换回调似乎没有被回调。我正在关注 CKEditor5 doc 的 SimpleBox example 中的教程，使其适应 Angular，但似乎并没有那么简单...

这是我的 HTML 模板：

<ckeditor [editor]="CKEditor" data='<p>This is a simple Box:</p>
        <section class="simple-Box">
            <h1 class="simple-Box-title">Box title</h1>
            <div class="simple-Box-description">
                <p>The description goes here.</p>
                <ul>
                    <li>It can contain lists,</li>
                    <li>and other block elements like headings.</li>
                </ul>
            </div>
        </section>'
    (ready)="ready($event)">
</ckeditor>

这是我的 component.ts :

export class DetailsComponent implements OnInit {
  public CKEditor = InlineEditor;

  constructor() { }

  ngOnInit(): void {
  }

  ready(editor) {                                                                 // ADDED
    const schema = editor.model.schema;

    schema.register('simpleBox',{
      // Behaves like a self-contained object (e.g. an image).
      isObject: true,// Allow in places where other blocks are allowed (e.g. directly in the root).
      allowWhere: '$block'
    });

    schema.register('simpleBoxTitle',{
      // Cannot be split or left by the caret.
      isLimit: true,allowIn: 'simpleBox',// Allow content which is allowed in blocks (i.e. text with attributes).
      allowContentOf: '$block'
    });

    schema.register('simpleBoxDescription',// Allow content which is allowed in the root (e.g. paragraphs).
      allowContentOf: '$root'
    });
    // ADDED
    const conversion = editor.conversion;

    conversion.elementtoElement({
      model: 'simpleBox',view: {
        name: 'section',classes: 'simple-Box'
      }
    });

    conversion.elementtoElement({
      model: 'simpleBoxTitle',view: {
        name: 'h1',classes: 'simple-Box-title'
      }
    });

    conversion.elementtoElement({
      model: 'simpleBoxDescription',view: {
        name: 'div',classes: 'simple-Box-description'
      }
    });
  }

最后，我的 scss 文件：

::ng-deep .ck-content {
    
    .simple-Box {
        padding: 10px;
        margin: 1em 0;

        background: rgba( 0,0.1 );
        border: solid 1px hsl(0,0%,77%);
        border-radius: 2px;
    }

    .simple-Box-title,.simple-Box-description {
        padding: 10px;
        margin: 0;

        background: #FFF;
        border: solid 1px hsl(0,77%);
    }

    .simple-Box-title {
        margin-bottom: 10px;
    }
}

这直接来自示例页面。但这似乎不起作用。这些类只是被删除了，就好像模型没有注册一样。似乎没有进行转换：

这是在屏幕上呈现的内容：

另外，如果我在我的数据中手动添加一个测试，它会被替换为一个

测试

，就好像这个视图不被允许/注册一样。

console.log 显示调用了我的就绪回调，editor.model.schema.isRegistered 告诉我我的模型实际上已注册。

我错过了什么？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）