如何在ckeditor5中添加自定義類和樣式

Question

我使用ckeditor5，如何自定義它並使其動態添加類？

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

npm我@ 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" }
            ]
        }
    }
}