如何在 React 中将 fontColor、fontBackgroundColor、fontSize 添加到 ckeditor5

编程问答 2022-05-15

问题描述

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','fontBackgroundColor'

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

非常感谢您的帮助。先谢谢了。

解决方法

似乎@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

创建您自己的
ckeditorckeditorckeditorckeditor5reactjsreactjsreactjsreactjs