import React, { useState, useEffect, useRef } from "react";
import styles from "./boarder.module.css";
export default function MyEditor() {
const editorRef = useRef();
const [editorLoaded, setEditorLoaded] = useState(false);
const { CKEditor, ClassicEditor } = editorRef.current || {};
const [boardContent, setBoardContent] = useState({
title: "",
content: "",
});
const [viewContent, setViewContent] = useState([]);
useEffect(() => {
editorRef.current = {
CKEditor: require("@ckeditor/ckeditor5-react").CKEditor,
ClassicEditor: require("@ckeditor/ckeditor5-build-classic"),
};
setEditorLoaded(true);
}, []);
const getValue = (e) => {
const { name, value } = e.target;
setBoardContent({
...boardContent,
[name]: value,
});
console.log(boardContent);
};
return editorLoaded ? (
<div>
<div className="center">
<h1>Movie Review</h1>
<div className={styles.movie_container}>
{viewContent.map((e, i) => (
<div>
<h2>{e.title}</h2>
<div>{e.content}</div>
</div>
))}
;
</div>
<div className={styles.form_wrapper}>
<input
className={styles.title_input}
type="text"
placeholder="제목"
onChange={getValue}
name="title"
/>
</div>
<button
className={styles.submit_button}
onClick={() => {
setViewContent(viewContent.concat({ ...boardContent }));
}}
>
입력
</button>
</div>
<CKEditor
editor={ClassicEditor}
data="<p>Hello from CKEditor 5!</p>"
onChange={(event, editor) => {
const data = editor.getData();
console.log({ event, editor, data });
}}
/>
</div>
) : (
<div>Editor loading</div>
);
}
최적화 필요