React에 CKEditor5 적용하기 (Online Builder)

React에 CKEditor5을 적용하는데 설명이 너무 없는 것 같다... (내가 문서를 잘 이해 못하는 것일수도...)

npm으로 CKEditor를 설치하게 되면 안깔린 플러그인들은 또 별도로 설치해줘야하는데

그렇게 하면 중복? 되었다는 에러가 계속난다... 

그래서 찾은 방법이 CKEditor 홈페이지에 내가 필요한 플러그인들을 넣고 파일을 다운로드해서 프로젝트에 적용하는 것이다.

 

 

에디터 타입은 클래식으로 선택했다. UI 보고 원하는 것 선택하면 될듯!!!

 

 

 

필요한 플러그인들을 ADD 해준다.

PREMIUM 뱃지가 붙은건 넣지말자! 아래 처럼 나중에 돈든다고 나온다... 30일만 사용가능하게된다. 

 

나는 왠만한 플러그인들을 다 넣어줄 것이다!!

내가 추가한 플러그인들이다!

 

 

툴바에 보여졌으면 하는 플러그인들을 셋팅해준다!!

그리고 다음에 한국어로 언어 설정해주고 zip 파일 다운로드 해주면된다!!

 

그리고 프로젝트 내부에 ckeditor5 폴더 만들어져서 zip파일 내부에 있는 파일들을 전부 옮겨줬다.

 

 

그리고 npm을 이용해 ckeditor5를 설치해줄 것이다.

현재 경로 확인해서 file: 을 이용해서 로컬 모듈을 설치해준다.

npm install file:./ckeditor5
npm install @ckeditor/ckeditor5-react

 

node_modules 폴더 안에 모듈이 잘 설치되었는지 확인

package.json에도 한번 더 확인!

잘 설치가 된것 같다.

 

 

TextEditor.jsx 파일을 생성해서 아래와 같이 작성해주면 된다.

import { CKEditor } from "@ckeditor/ckeditor5-react";
import * as ClassicEditor from "ckeditor5-custom-build/build/ckeditor";
import axios from "axios";

// function uploadAdapter(loader) {
//   return {
//     upload: () => {
//       return new Promise(async (resolve, reject) => {
//         try {
//           const file = await loader.file;
//           const response = await axios.request({
//             method: "POST",
//             url: "http://localhost:5173/upload_files",
//             data: {
//               files: file,
//             },
//             headers: {
//               "Content-Type": "multipart/form-data",
//             },
//           });
//           resolve({
//             default: `http://localhost:5173/${response.data.filename}`,
//           });
//         } catch (error) {
//           reject("Hello");
//         }
//       });
//     },
//     abort: () => {},
//   };
// }
// function uploadPlugin(editor) {
//   editor.plugins.get("FileRepository").createUploadAdapter = (loader) => {
//     return uploadAdapter(loader);
//   };
// }

<CKEditor
    editor={ClassicEditor}
    config={{
      placeholder: "내용을 입력하세요.",
      // toolbar: ["sourceEditing"],
      // allowedContent: true,
      // extraAllowedContent: "style",
      htmlSupport: {
        allow: [
          {
            name: /.*/,
            attributes: true,
            classes: true,
            styles: true,
          },
        ],
      },
      removePlugins: ["Heading", "Style", "Title"],
      // extraPlugins: [uploadPlugin],
      fontSize: {
        options: [9, 11, 13, "default", 17, 19, 21],
      },
      // supportAllValues: true,
    }}
    data=""
    onReady={(editor) => {}}
    onChange={(event, editor) => {
      setContent(editor.getData());
    }}
    onBlur={(event, editor) => {
      // console.log("Blur.", editor.getData());
    }}
    onFocus={(event, editor) => {}}
  />

Config 설정 방법은 CKEditor5 공식문서를 좀 참고하면 될 것 같다.

사진 업로드 기능은 아직 구현하지 못했다.

uploadPlugin 이라고 공식문서에 나와있긴 했는데 이해하지 못했다...

 

 

에디터 높이는 아래와 같이 설정해주면된다.

.ck-editor__editable {
  height: 800px !important;
}

 

완성된 모습

mui 를 이용해서 미리보기 버튼과 preview 팝업을 만들었다.

미리보기 버튼을 클릭하면 CKEditor에 작성한 내용을 모달로 확인할 수 있다.

import { Button, Modal, Box } from "@mui/material";

// modal 팝업 open, close
const [open, setOpen] = useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);

// 에디터 내용
const [content, setContent] = useState("");

// 역슬래시를 빈문자로 바꿔주는 함수
const formatContent = (cont) => {
    return cont.replace(/\\/g, "");
};

// 미리보기 버튼
<Button variant="outlined" onClick={handleOpen}>
	미리보기
</Button>

// 모달 팝업
<Modal
    open={open}
    onClose={handleClose}
    aria-labelledby="modal-modal-title"
    aria-describedby="modal-modal-description"
>
    <Box sx={style}>
      <div dangerouslySetInnerHTML={{ __html: formatContent(content) }}></div>
    </Box>
</Modal>

// 모달 정 가운데 위치
const style = {
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  bgcolor: "background.paper",
  border: "2px solid #000",
  boxShadow: 24,
  p: 4,
  maxHeight: "80vh",
  overflowY: "scroll",
};