리액트에서 CK에디터 구현하기 1.[20221105 TIL]

게시판기능을 만들다 그냥 너무 심심한 게시판 등록글은 별로라서 에디터를 검색하다 CK 에디터가 무난하게 맘에 들었다.

근데 공식문서를 읽어보니 꽤...복잡하다... 

 

CK에디터 구현

일단 구현은 했다..

고민 포인트 1. 어떻게 적용하나??

아래와 같이 구현했는데 CK 에디터 공식홈페이지를 가면 Class 로 구현을 해놓아서 어떻게 적용해야하나 고민을 했었다. 

 

또 방법도 여러가지인데다 리액트에 적용하는 방법은 달라서 잠시 혼선이 왔지만 일단 손을 움직이자 하면서 적용한 결과 아래와 같이 나왔다.

 

id 와 type name  그리고 label 을 따로 추가해주었다.

그리고  처음에는 리액트 훅 폼으로 폼을 처리해주다가 다시 변수를 하나씩 전달해되 리덕스 구조를 지키면서 해주려니 기억이 잘 안났다.(이전 코드를 참고하면 구현은 했지만 강의를 다시 봐야 할 듯 하다. 왜 그렇게 사용하고 어떤 맥락에서 코드가 나오는지가 중요하니까)

return (
    <>
      <h2>잡담소</h2>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="input-title">제목</label>
          <input
            id="input-title"
            type="text"
            name="title"
            value={freeTalkFormStore.title}
            onChange={(e) => freeTalkFormStore.changeTitle(e.target.value)}

          />
        </div>
        <div>
          <label htmlFor="input-hashTags">해쉬태그</label>
          <input
            id="input-hashTags"
            type="text"
            name="hashTags"
            value={freeTalkFormStore.hashTags}
            onChange={(e) => freeTalkFormStore.changeHashTags(e.target.value)}
          />
        </div>
        <div>
          <label htmlFor="input-content">내용</label>
          <CKEditor
            editor={ClassicEditor}
            data="<p>Hello from CKEditor 5!</p>"
            id="input-content"
            type="text"
            name="content"
            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 content = editor.getData();
              freeTalkFormStore.changeContent(content);
              console.log({ event, editor, content });
            }}
            onBlur={(event, editor) => {
            // console.log('Blur.', editor);
            }}
            onFocus={(event, editor) => {
            // console.log('Focus.', editor);
            }}
          />
        </div>
        <div>
          <button type="submit">
            글 등록하기
          </button>
        </div>
      </form>
    </>
  );
}

 

preventDefault()

const handleSubmit = (event) => {
    const { title, hashTags, content } = freeTalkFormStore;

    const freeTalk = { title, hashTags, content };

    console.log(freeTalk);

    freeTalkFormStore.createFreeTalk(freeTalk);

    event.preventDefault();
  };

그리고 등록 버튼을 누르면 자꾸 화면이 리랜더링 되어서 프리벤트 디폴트로 막아주고 콘솔에 에디터의 내용이 찍히는지 보았다.

 

한참을 안찍히다...드디어 찍힌다!

콘솔로그

다음문제

리액트는 html 태그 입력을 막아놓았다는데 백으로 넘겨주었다 어떻게 넘겨올까?

위 질문이 가장 고민이었다. 오늘은 백엔드에 post 상태를 구현했는데 다시 프론트엔드로 어떻게 넘어올지는 내일 구현해보아야 알 것 같다.

 

내일 다시 마저 보고 하겠다!

 

추가팁

유튜브에서 인도인 영상은 보지말자 발음도 구리고 방해만 된다....

 

에디터 홈페이지에 가도 안나온다 다큐멘테이션에 가야함!

https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/quick-start.html

Quick start - CKEditor 5 Documentation

\