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

Question

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

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

npm i @ckeditor/ckeditor5-angular

例如。

  

<blockquote>值</blockquote>

我希望它每次动态使用blockquote时都添加类

  

<blockquote class="blockquote">值</blockquote>

Answer 1

可以使用2种样式来设置Angular的CKEditor 5>

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

使用这两种方法检查如何设置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" }
            ]
        }
    }
}