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

Question

I am using CKEditor React Component (https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html) at multiple times in my project. RichTextEditor.js (in folder 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;

I have used this component in folder A where I set the height of editor by creating CSS file and changed the default height as follows:

RichTextEditor.css (in folder A)

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

Now, I want to use the same component in folder A to folder B where height of component is different. But at the same time I want to use philosophy of React to reuse the component. But if I import component from folder A to folder B, I will also need to import the css file in folder A which will be of height 100px. But in folder B, I want different height. otherwise, I need to create different CSS file in folder B which I don't want to do.

The thing is I am using Material UI and I don't know how to edit this in built style properties in CKEditor with makeStyles in Material UI. Can anyone please tell me, how can I reuse the component and set the different heights in different components with Material UI??

zubozrout · Accepted Answer · 2021-04-28T11:33:54.727

I've just been working on exactly the same thing. And although you can do something like this under the CKEditor component:

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

as per: How to set the height of CKEditor 5 (Classic Editor)

You will also need to do that for onFocus and onBlur and what I set in onBlur is overwritten by CKEditor anyway so it shrinks. I guess some ugly delay solution might work there but this is fortunately not needed.

I believe we can use something like this instead:

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

B)

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

And then in the component:

C) const classes = useStyles();

D)

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

There might be a better way to deal with that but this one looks clean enough.

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

1 Answers1