如何使用 React 在 Ckeditor 中添加字体大小和字体系列

Question

我正在使用 ckeditor5 和 reactJs。我想提供一个选项来选择他们愿意的字体大小和字体系列。但是，到目前为止，我还无法实现此功能。我尝试了这种方法来添加字体大小和字体系列。但是，它没有用。

blockQuote、Bold、italic 等其他配置运行良好。我不确定我在哪里犯错。我也为此浏览了很多教程。不幸的是，没有得到任何东西。

import React, { Component } from "react";
import { Form, Button, Container } from "react-bootstrap";
import CKEditor from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import Formik from "formik";


export default class TextForm extends Component {
    render() {
        
        const sectionName = this.props.sectionName;
        let data = Object.keys(this.props.field).map((elem, index) => {
            return (
                <Container className="mt-3" key={index}>
                    <h3 className="c-subHeading">{this.props.subHeading[index]}</h3>
                    <CKEditor
                        config={{
                            toolbar: [
                                "heading",
                                "|",
                                "fontFamily",
                                "fontSize",
                                "|",
                                "bold",
                                "italic",
                                "link",
                                // "bulletedList",
                                // "numberedList",
                                "|",
                                "blockQuote",
                            ],
                            heading: {
                                options: [
                                    {
                                        model: "paragraph",
                                        title: "Paragraph",
                                        class: "ck-heading_paragraph",
                                    },
                                    {
                                        model: "heading1",
                                        view: "h1",
                                        title: "Heading 1",
                                        class: "ck-heading_heading1",
                                    },
                                    {
                                        model: "heading2",
                                        view: "h2",
                                        title: "Heading 2",
                                        class: "ck-heading_heading2",
                                    },
                                ],
                            },
                            fontFamily: {
                                options: [
                                    "default",
                                    "Ubuntu, Arial, sans-serif",
                                    "Ubuntu Mono, Courier New, Courier, monospace",
                                ],
                            },
                            fontSize: {
                                options: [9, 11, 13, "default", 17, 19, 21],
                            },
                        }}
                        editor={ClassicEditor}
                        data={this.props.field[elem]}
                        onInit={(editor) => {}}
                        onChange={(event, editor) =>
                            this.props.changeHandler(elem, sectionName, editor.getData())
                        }
                    />
                </Container>
            );
        });
        return (
            <div>
                <Form>{data}</Form>
                <button
                    className="c-btn c-btn--right c-btn--medium"
                    onClick={(event) => this.props.updateHandler(event, sectionName)}
                >
                    Update
                </button>
                <br />
                <br />
                <br />
                <hr />
            </div>
        );
    }
}

我也看过文档。但是，不知道该把代码放在哪里。

https://ckeditor.com/docs/ckeditor5/latest/features/font.html

Answer 1

我认为缺少一个插件。这里是所有道具列表https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editorconfig-EditorConfig.html