I have integrated CKEditor React Component into my project from the following link: . I am using this component multiple times across different folders within my project.
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;
In one instance of usage in folder A, I adjusted the height of the editor by modifying the CSS file as shown below:
RichTextEditor.css (in folder A)
.ck-editor__editable {
min-height: 100px;
}
Now, I need to reuse the same component in a different folder B with a different height requirement. I want to maintain reusability of the component without duplicating code or creating separate CSS files for each folder. However, I am unsure of how to customize the styling of CKEditor components using Material UI's makeStyles feature. Can someone guide me on how I can achieve this flexibility in setting different heights for the CKEditor component while leveraging Material UI? Thank you!