리액트에서 네이버 스마트 에디터 구현

프로젝트에 적용할 에디터를 선별하는 과정에서 네이버 스마트 에디터를 구현한 것을 정리한다.

 

초기 로딩이 더 길어지는 것을 방지하기 위해 index.html에 스크립트를 추가해 구현하는 방법 대신 useEffect를 통해 특정 컴포넌트가 마운트될 때만 스크립트를 추가하고 언마운트 시 스크립트를 다시 제거하는 방법으로 구현하였다.

 

import React, { useEffect, useRef } from "react";

declare global {
  interface Window {
    nhn: any;
  }
}

const NaverEditor = () => {
  const TextRef = useRef<HTMLTextAreaElement | null>(null);
  const oEditors = useRef<any>({});

  useEffect(() => {
    // 스크립트 동적 로드
    const script = document.createElement("script");
    script.src = "/libs/smarteditor/js/HuskyEZCreator.js";
    script.async = true;
    document.body.appendChild(script);

    // HuskyEZCreator가 로드된 후에 호출되는 함수
    script.onload = () => {
      if (window.nhn && window.nhn.husky && window.nhn.husky.EZCreator) {
        window.nhn.husky.EZCreator.createInIFrame({
          oAppRef: oEditors.current,
          elPlaceHolder: "ir1",
          sSkinURI: "/libs/smarteditor/SmartEditor2Skin.html",
          fCreator: "createSEditor2",
        });
      }
    };

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  const submitContents = (event: React.FormEvent) => {
    event.preventDefault();
    if (oEditors.current && oEditors.current.getById && oEditors.current.getById["ir1"]) {
      // 에디터의 bold, 정렬 등을 눌렀을 때 textarea에 적용시키는 로직
      oEditors.current.getById["ir1"].exec("UPDATE_CONTENTS_FIELD", []);
    }

    if (TextRef.current && TextRef.current.value !== "") {
      console.log(TextRef.current.value);
    }
  };

  return (
    <form onSubmit={submitContents}>
      <textarea name="ir1" id="ir1" ref={TextRef} style={{ width: "100%", height: "300px" }} defaultValue=""></textarea>
      <button type="submit">제출</button>
    </form>
  );
};

export default NaverEditor;

 

네이버 스마트 에디터 단점
순수한 JavaScript와 jQuery 기반으로 작성된 라이브러리다.

간단하게 구현 가능하지만, 스크립트 로직 자체가 DOM 조작에 의존하기 때문에 리액트와는 전혀 어울리지 않는 라이브러리다.

그리고 ui가 구리다...