reactjs - 如何在React中向ckeditor5添加fontColor、fontBackgroundColor、fontSize

Question

import React, { Component } from "react";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import BalloonEditor from "@ckeditor/ckeditor5-build-balloon";

class MyEditor extends Component {
  render() {
    return (
      <div>
        <h2>HEllo world</h2>
        <CKEditor
          config={{
            toolbar: {
              items: [
                  'heading', '|',
                  'alignment', '|',
                   'italic', 'strikethrough', 'underline', 'subscript', 'superscript', '|',
                  'link', '|',
                  'bulletedList', 'numberedList', 'todoList',
                  '-', // break point
                  'fontfamily', 'fontsize', 'fontColor', 'fontBackgroundColor', '|',
                  'code', 'codeBlock', '|',
                  'insertTable', '|',
                  'outdent', 'indent', '|',
                  'uploadImage', 'blockQuote', '|',
                  'undo', 'redo'
              ],
              shouldNotGroupWhenFull: true
          }
          }}
          editor={BalloonEditor}
          data="<p>Hello from CKEditor 5!</p>"
          onChange={ ( event, editor ) => {
            const data = editor.getData();
            console.log( { event, editor, data } );
        } }
        />
      </div>
    );
  }
}

export default MyEditor;

上面的代码没有什么复杂的，我试图熟悉ckeditor5。 我的问题是上面的项目数组中的所有选项都在工具栏中可见除了

'fontfamily', 'fontsize', 'fontColor', 'fontBackgroundColor'

我知道我在这里遗漏了一些东西。我在ckeditor5文档中搜索了解决方案，但找不到专门针对React的解决方案。

非常感谢您的帮助。谢谢提前。

Answer 1

似乎@ckeditor/ckeditor5-build-balloon不支持Font plugin .

你必须Customize one of the existing builds

import Font from '@ckeditor/ckeditor5-font/src/font';
...

class MyEditor extends Component {
  render() {
    return (
      <div>
        <h2>HEllo world</h2>
        <CKEditor
          config={{
            plugins: [ Font, ... ],
            toolbar: [ 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', ... ]
            ...
          }}
          // rest props
        } }
        />
      </div>
    );
  }
}

export default MyEditor;

或使用 CKEditor online builder 创建您自己的