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

Question

我在我的项目中多次使用 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 在不同的组件中设置不同的高度？？

Answer 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';

B)

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

然后在组件中：

C) const classes = useStyles();

D)

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

可能有更好的方法来处理这个问题，但这个看起来很干净。

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

How to increase the size of CKEditor React component with Material UI react?

reactjs

material-ui

ckeditor