如何使用 Material UI react 增加 CKEditor React 组件的大小？答案

【问题标题】：How to increase the size of CKEditor React component with Material UI react?如何使用 Material UI react 增加 CKEditor React 组件的大小？
【发布时间】：2020-11-11 08:42:49
【问题描述】：

我在我的项目中多次使用 CKEditor React 组件 (https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html)。 RichTextEditor.js（在文件夹 A）

import React, { Component } from "react";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import "./RichTextEditor.css";

const RichTextEditor = () => {
  return (
    <div>
      <CKEditor 
        editor={ClassicEditor}
        data="<p>Enter your brand description here...</p>"
        onReady={(editor) => {
          // You can store the "editor" and use when it is needed.
          console.log("Editor is ready to use!", editor);
        }}
        onChange={(event, editor) => {
          const data = editor.getData();
          console.log({ event, editor, data });
        }}
        onBlur={(event, editor) => {
          console.log("Blur.", editor);
        }}
        onFocus={(event, editor) => {
          console.log("Focus.", editor);
        }}
      />
    </div>
  );
};

export default RichTextEditor;

我在文件夹 A 中使用了这个组件，我通过创建 CSS 文件来设置编辑器的高度，并将默认高度更改如下：

RichTextEditor.css（在文件夹 A）

.ck-editor__editable {
  min-height: 100px;
}

现在，我想在文件夹 A 到文件夹 B 中使用相同的组件，其中组件的高度不同。但同时我想使用 React 的哲学来重用组件。但是如果我将组件从文件夹 A 导入到文件夹 B，我还需要在文件夹 A 中导入高度为 100px 的 css 文件。但在文件夹 B 中，我想要不同的高度。否则，我需要在我不想做的文件夹 B 中创建不同的 CSS 文件。

问题是我正在使用 Material UI，但我不知道如何在 CKEditor 的内置样式属性中使用 Material UI 中的 makeStyles 来编辑它。谁能告诉我，如何重用组件并使用 Material UI 在不同组件中设置不同的高度？？

【问题讨论】：

标签： reactjs material-ui ckeditor

【解决方案1】：

我一直在做同样的事情。虽然你可以在 CKEditor 组件下做这样的事情：

onReady={(editor) => {
   editor.ui.view.editable.element.style.minHeight = "500px";
}}

根据：How to set the height of CKEditor 5 (Classic Editor)

您还需要为 onFocus 和 onBlur 执行此操作，并且我在 onBlur 中设置的内容无论如何都会被 CKEditor 覆盖，因此它会缩小。我想一些丑陋的延迟解决方案可能会在那里工作，但幸运的是这不是必需的。

我相信我们可以改用这样的东西：

A)import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
    richTextEditor: {
        "& .ck-editor__main > .ck-editor__editable": {
            minHeight: "100px"
        }
    }
}));

然后在组件中：

C)const classes = useStyles();

<div className={classes.richTextEditor}>
    <CKEditor .../>
</div>

可能有更好的方法来解决这个问题，但这个看起来足够干净。

【讨论】：