Ckeditor with Next js - 미완

Next를 활용하여 게시판을 만들던 중 Ckeditor를 활용하여 글작성 페이지를 만들기로 했다.

Ckeditor 공식문서를 읽어보면 React에 대한 설명이 나온다.

Next를 따로 지원을 해주진않는다.

우선 설치를 하자

npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic

설치가 완료되면 작업 파일 안에 임폴트를 한다

import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

그 후 ckeditor 설정을 해주면 끝 !

        <CKEditor
          type=""
          editor={ClassicEditor}
          config={editorConfiguration}
          onChange={(event: any, text: any) => {
    //ckeditor-react type은 아무리 찾아봐도 못찾것다 ...
    // 함수의 두번째 파라미터를 통해 텍스트박스 안 값을 가지고 올 수 있다.
            console.log(event,text)
          }}
        />

이러면 아주 기본적인 Ckeditor가 만들어진다.

자 그럼 여기서 제일 중요한 이미지 업로드추가해보자

문제는 여기서 엄청 많은 에러를 경험했다는 것이다.

공식문서에서 react는

config={{
       plugins:["image",...],
       toolbar:{"imageupload,..."}
       }}
  //예입니다. 

대충 이런식으로 작성해 놓고

웹팩 수정하면 끝이지만

아마 저렇게 작성해놓으면 next는

Global CSS cannot be imported from within node_modules.

라는 오류가 나타날 것이다

이걸 해결하기 위해 next.config.js를 수정해줬었다.

그러나 문제가 또 발생했다.

next.config.js에 수정부분은 css부분을 수정하는 것인데

@zeit/next-css가 next안으로 빌트인되버린 것 ...

그래서 더 이상 노드 모듈 내 씨에스에스를 불러올 수 없다는 것이다.

ckeditor github을 확인하던 중

NEXT는 완벽하게 지원을 안하기에 따로 넣어줘야한다는 글을 발견

방법은

ckeditor에서 제공하는 ckeditor5 online builder를 활용하여

다운을 받고 받은 파일을 내 파일 안에 폴더로 넣은 뒤

npm install file:local adress

해주고 임폴트해주면 완성 !

폴더로

이러쿠롱 넣어주고

import React, { ReactElement, useEffect, useRef } from "react";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import Editor from "ckeditor5/build/ckeditor";

axios.defaults.withCredentials = true;

const editorConfiguration = {
  toolbar: {
    items: [
      "heading",
      "|",
      "bold",
      "italic",
      "link",
      "bulletedList",
      "numberedList",
      "|",
      "outdent",
      "indent",
      "|",
      "imageUpload",
      "blockQuote",
      "mediaEmbed",
      "undo",
      "redo",
      "insertTable",
    ],
  },
  // ckfinder: {
  //   uploadUrl: `/api/postApi/imageApi`,
  //   options: { resourceType: "Images" },
  // },
};
interface Props {
  isLoading: boolean;
  handleEditorText: (data: string) => void;
}

function EditorComponent({ isLoading, handleEditorText }: Props): ReactElement {
  const toastRef = useRef<TuiEditor | null>(null);

  const handleTextValue = () => {
    if (toastRef.current !== null) {
      const editorRefInstance = toastRef.current.getInstance();
      const htmlValue = editorRefInstance.getHTML();
      handleEditorText(htmlValue);
    }
  };

  return (
    <div>
      {isLoading ? (
        <CKEditor
          type=""
          editor={Editor}
          config={editorConfiguration}
          onChange={(event: any, text: any) => {
            const data = text.getData();
            console.log(data);
            handleEditorText(data);
          }}
        />
      ) : (
        <div>Loading...</div>
      )}
    </div>
  );
}

export default EditorComponent;

완성