React中@ckeditor/ckeditor5-editor-classic配置及格式保留问题求助

1. 替换依赖包 #

先卸载预构建的@ckeditor/ckeditor5-build-classic，安装核心编辑器及所需插件（包含原build-classic的全部基础插件，新增粘贴Office和字体管理插件）：

npm uninstall @ckeditor/ckeditor5-build-classic
npm install @ckeditor/ckeditor5-editor-classic @ckeditor/ckeditor5-essentials @ckeditor/ckeditor5-paragraph @ckeditor/ckeditor5-basic-styles @ckeditor/ckeditor5-heading @ckeditor/ckeditor5-list @ckeditor/ckeditor5-indent @ckeditor/ckeditor5-link @ckeditor/ckeditor5-image @ckeditor/ckeditor5-table @ckeditor/ckeditor5-media-embed @ckeditor/ckeditor5-paste-from-office @ckeditor/ckeditor5-font

2. 完整React组件配置 #

创建CKEditor组件，组装插件并配置粘贴、字体功能：

import React, { useState } from 'react';
import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
import { CKEditor } from '@ckeditor/ckeditor5-react';
// 导入所有必需插件
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import List from '@ckeditor/ckeditor5-list/src/list';
import Indent from '@ckeditor/ckeditor5-indent/src/indent';
import Link from '@ckeditor/ckeditor5-link/src/link';
import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
import Table from '@ckeditor/ckeditor5-table/src/table';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
import Font from '@ckeditor/ckeditor5-font/src/font';

// 导入编辑器样式
import '@ckeditor/ckeditor5-theme-lark/theme.css';

const CKEditorComponent = () => {
  const [editorContent, setEditorContent] = useState('');

  // 编辑器核心配置
  const editorConfig = {
    // 加载所有插件（覆盖原build-classic的全部功能）
    plugins: [
      Essentials, Paragraph, Bold, Italic, Underline, Strikethrough,
      Heading, List, Indent, Link, Image, ImageToolbar, ImageCaption,
      ImageStyle, ImageResize, Table, TableToolbar, MediaEmbed,
      PasteFromOffice, Font
    ],
    // 工具栏布局（与build-classic一致，新增字体控制项）
    toolbar: [
      'heading', '|',
      'bold', 'italic', 'underline', 'strikethrough', '|',
      'fontFamily', 'fontSize', 'fontColor', 'fontBackgroundColor', '|',
      'bulletedList', 'numberedList', 'indent', 'outdent', '|',
      'link', 'image', 'insertTable', 'mediaEmbed', '|',
      'undo', 'redo'
    ],
    // Office粘贴样式保留配置
    pasteFromOffice: {
      preserveStyles: true // 保留字体大小、颜色、加粗等样式，生成对应HTML标签
    },
    // 内置字体选项（可根据项目需求自定义）
    fontFamily: {
      options: [
        'default',
        'Arial, Helvetica, sans-serif',
        'Georgia, serif',
        'Tahoma, Geneva, sans-serif',
        'Times New Roman, Times, serif',
        'Verdana, Geneva, sans-serif'
      ],
      supportAllValues: true // 允许用户输入自定义字体（可选）
    },
    // 字体大小选项
    fontSize: {
      options: [9, 11, 13, 'default', 17, 19, 21]
    },
    // 图片工具栏配置（与build-classic一致）
    image: {
      toolbar: [
        'imageTextAlternative', 'toggleImageCaption', 'imageStyle:inline',
        'imageStyle:block', 'imageStyle:side'
      ]
    },
    // 表格工具栏配置（与build-classic一致）
    table: {
      contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells']
    }
  };

  return (
    <div className="ck-editor-wrapper">
      <CKEditor
        editor={ClassicEditor}
        config={editorConfig}
        data={editorContent}
        onChange={(event, editor) => {
          setEditorContent(editor.getData());
        }}
      />
    </div>
  );
};

export default CKEditorComponent;

3. 关键配置说明 #

• 粘贴样式保留：通过pasteFromOffice.preserveStyles: true开启Office粘贴的样式保留，会自动将Office中的格式转换为对应的HTML内联样式或标签，无需额外处理字体识别。
• 内置字体：fontFamily.options定义了项目提供的可选字体，用户可直接选择，也可通过supportAllValues开启自定义字体输入。
• 功能对齐：插件列表和工具栏布局完全对齐原@ckeditor/ckeditor5-build-classic的默认配置，确保基础功能无缺失。

内容的提问来源于stack exchange，提问作者Hesam Feizollahi