[Editor] summernote로 에디터 구현하기

[Editor] Quill 에디터 적용하기

[React] Next.js에서 Quill 에디터 사용하기 이 글에는 Next.js에서 react-quill의 사용 없이 Quill 에디터를 사용하기 위한 코드를 제공합니다. 코드의 부족한 점과 문의 사항은 댓글 주시면 답변 및 수정하

eundol1113.tistory.com

이전에 구현해봤던 Qull 에디터는 이미지 사이즈 변경하는 기능을 구현하지 못해서 새로운 라이브러리를 찾던 중 summernote 라이브러리를 발견했다!!

Quill 라이브러리와 비교했을 때 더 좋다고 생각했던 부분은

1) 코드가 더 간결하고 알아보기 쉽다.

2) 부트스트랩과 jQuery를 기반으로 하고 있어서 (내 입장에서는) 이해하기 쉬웠다.
3) 원하는 대로 커스텀 하기 좋다.

공식문서를 보더라도

- 설치가 쉽다.

- 커스텀 하기 좋다.

- 사용하기 쉽게 예시를 제공한다.

- 오픈 소스

- 통합하기 좋다.

고 명시하고 있다.

1. 설치

: Next.js 프레임워크를 사용하고 있기 때문에 _app.js에 next/head를 import 받아서 삽입하면 되는 데 기존에 사용하고 있던 class명들과 겹치는 부분들이 생겨 Editor.js(에디터 구현 컴포넌트)에 next/head를 import 받아서 아래 코드를 삽입했다.

import Head from "next/head";

<!-- include libraries(jQuery, bootstrap) -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>

2. UI

: 공식문서에 보면 아래 코드 한 줄 추가하면 된다고 나온다. 삽입한다.

3. 에디터

: jQuery 기반이기 때문에 .ready 메서드로 summernote를 불러오는 데 이를 Next.js에서는 다음과 같이 사용할 수 있다.

useEffect(() => {
$(".click2edit").summernote({
  placeholder: "내용을 입력 해주세요.",
  tabsize: 2,
  height: 1000,
});
}, []);

4. 추가 기능 (수정, 저장, 출력)

5. 실행

전체 코드

// 출처 : https://summernote.org/getting-started/
// 참고 : https://appdevelopmaster.tistory.com/395
import { useEffect } from "react";

import Head from "next/head";

const Editor3 = (props) => {
  useEffect(() => {
    $(".click2edit").summernote({
      placeholder: "내용을 입력 해주세요.",
      tabsize: 2,
      height: 1000,
    });
  }, []);

  const edit = () => {
    $(".click2edit").summernote({
      placeholder: "내용을 입력 해주세요.",
      tabsize: 2,
      height: 1000,
      focus: true,
    });
  };

  const save = () => {
    var markup = $(".click2edit").summernote("code");
    $(".click2edit").summernote("destroy");
  };

  return (
    <div>
      <Head>
        {/* summernote 에디터 라이브러리 */}
        <link
          href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          rel="stylesheet"
        />
        <script src="https://code.jquery.com/jquery-3.5.1.min.js" />
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" />
        <link
          href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css"
          rel="stylesheet"
        />
        <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js" />
      </Head>
      <div className="click2edit" />
      <button onClick={edit}>수정</button>
      <button onClick={save}>저장</button>
    </div>
  );
};

export default Editor3;

'더 알아보기 > 기능' 카테고리의 다른 글

[React] 버튼 눌러서 프린트 출력하기 (0)	2022.09.14
[JS] window.print()를 사용하여 프린트 영역 출력하기 (0)	2022.09.08
[React] 서명패드 만들기 (0)	2022.07.22
[React] 마우스 드래그로 스크롤 구현하기 - 라이브러리 문제점 해결 (0)	2022.07.18
[React] 마우스 드래그로 스크롤 구현하기 - 라이브러리 X (0)	2022.07.14