我的 Angular 应用程序中的 ckeditor5 有问题

Question

我在ckeditor中没有看到调整字体样式、字体大小、字体颜色的功能，我该怎么办？ 这些字符串与我安装的ckedotor相关：“@ckeditor/ckeditor5-angular”：“^7.0.1”， "@ckeditor/ckeditor5-basic-styles": "^42.0.0", "@ckeditor/ckeditor5-build-classic": "^41.4.2", "@ckeditor/ckeditor5-font": "^42.0.0", "@ckeditor/ckeditor5-heading": "^42.0.0",

我是新手，不知道该怎么做，有人可以帮助我吗？

Answer 1

要在 CKEditor 中启用字体样式、字体大小和字体颜色选项，您需要配置编辑器以包含必要的插件和工具栏项。您可以按照以下步骤进行操作：

1. 安装所需的插件： 您已经安装了所需的插件（@ckeditor/ckeditor5-font、@ckeditor/ckeditor5-basic-styles 等）。确保这些已正确安装在您的项目中。
2. 配置CKEditor： 您需要配置 CKEditor 以包含字体插件并将相关选项添加到工具栏。这通常在 CKEditor 设置的配置文件中完成。

以下是如何在 Angular 应用程序中配置 CKEditor 的示例：

import { Component } from '@angular/core';
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';

@Component({
  selector: 'app-editor',
  template: '<ckeditor [editor]="Editor" [config]="editorConfig"></ckeditor>',
})
export class EditorComponent {
  public Editor = ClassicEditor;
  public editorConfig = {
    toolbar: [
      'heading', '|',
      'bold', 'italic', 'underline', 'strikethrough', '|',
      'fontSize', 'fontColor', 'fontBackgroundColor', '|',
      'link', 'bulletedList', 'numberedList', '|',
      'blockQuote', 'insertTable', 'mediaEmbed', 'undo', 'redo'
    ],
    fontSize: {
      options: [
        'tiny',
        'small',
        'default',
        'big',
        'huge'
      ]
    },
    fontColor: {
      columns: 5,
      documentColors: 10
    },
    fontBackgroundColor: {
      columns: 5,
      documentColors: 10
    }
  };
}

3. 更新 Angular 模块： 确保您已在 Angular 模块中导入 CKEditorModule：

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
   
   import { AppComponent } from './app.component';
   import { EditorComponent } from './editor/editor.component';
   
   @NgModule({
     declarations: [
       AppComponent,
       EditorComponent
     ],
     imports: [
       BrowserModule,
       CKEditorModule ],providers: [],bootstrap: [AppComponent]})export class AppModule { }
   

4. 检查你的package.json： 确保您的 package.json 具有正确版本的 CKEditor 插件：

   "dependencies": { "@ckeditor/ckeditor5-angular": "^7.0.1", "@ckeditor/ckeditor5-basic-styles": "^42.0.0", "@ckeditor/ckeditor5-build-classic": "^41.4.2", "@ckeditor/ckeditor5-font": "^42.0.0", "@ckeditor/ckeditor5-heading": "^42.0.0"}
   

配置这些设置后，CKEditor 应该在工具栏中显示字体样式、大小和颜色的选项。

如果遇到任何问题，请务必检查浏览器控制台是否有错误，并验证所有必需的插件是否已正确安装并导入到您的项目中。