如何解决带有 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 举报,一经查实,本站将立刻删除。