如何在ckeditor5中添加自定义类和样式

Question

我用的是ckeditor5，如何自定义使其动态添加类？

目前我正在使用以下模块，

npm i @ckeditor/ckeditor5-angular

例如

<blockquote>value </blockquote>

我希望它在每次使用块引用时动态添加类

<blockquote class="blockquote">Value</blockquote>

Answer 1

CKEditor 5 for Angular 可以使用 2 个东西来设置样式>

组件样式表或 使用全局样式表。

检查如何使用这两种方法设置 CKEditor 5 组件的高度。

通过组件样式表 首先，在父组件的目录中创建一个 (S)CSS 文件，并在给定编辑器部分的样式前加上 :host 和 ::ng-deep 伪

/app/app.component.css */


:host ::ng-deep .ck-editor__editable_inline {
    min-height: 500px;
}

然后在父组件中添加上述样式表的相对路径：

/* src/app/app.component.ts */

@Component( {
    // ...
    styleUrls: [ './app.component.css' ]
} )

通过全局样式表设置高度 要使用全局样式表为组件设置样式，首先，创建它：

/* src/styles.css */

.ck-editor__editable_inline {
    min-height: 500px;
}

然后，将其添加到 angular.json 配置文件中：

"architect": {
    "build": {
        "options": {
            "styles": [
                { "input": "src/styles.css" }
            ]
        }
    }
}