작년쯤 아부지에게 디자이너말고 개발자의 길로 들어서겠다는 포부와 함께 HTML과 CSS로 작업한 프로젝트 페이지를 보여준 적이 있었다.
몇 달 뒤, 아부지에게 "개발자가 된 김에 아부지 사업에 쓰이는 홈페이지를 리뉴얼해달라"는 부탁을 받게 된다.
예..? 아부지..??
FE 파트도 잘 하지 못하는 나는 홀로서기로 DB를 만지게 되었고,,,
돌이킬 수 없는 firebase error의 늪에 빠지게 되었다,,
라는 서론을 가지고 게시판에 새로운 글쓰기 기능을 구현하기 위해서 *위지윅 에디터가 필요했다.
*위지윅 에디터란? : What You See Is What You Get의 약자로 작성 중의 문서의 체재가 항상 화면에 표시되어 있어, 그 화면을 직접 조작시켜서 문서를 편집할 수 있도록 한 방식. 대부분의 워드 프로세서가 이 방식을 취하고 있음.
그래서 위지윅 에디터를 찾아보게 되었다.
1. Tinymce
- 무료 위지윅 에디터,,,라고 나와있지만 부분 무료(월 1,000회)
- 굉장히 깔끔하고 이쁜 UI/UX
- 공식 문서와 구글링을 통해 다양한 선생님들을 만날 수 있어 다루기 쉽다.
- 클라우드
사용 방법
공식문서에서 제공하는 예시를 통해 빠르게 시작할 수 있다.
우선 나는 next.js(react)로 프로젝트를 진행하고 있어서 react설명에 적혀있는 방법으로 패키지를 다운했다.
tinymce 공식문서에서 패키지 다운 명령어를 복붙해준다.
npm install --save @tinymce/tinymce-react홈페이지에서 API 키를 발급받은 후, 아래 apiKey에 넣어준다. (나는 환경변수로 넣어주었다.)
그 후에 에디터 컴포넌트를 만들어 아래 내용도 빠르게 복붙해준다.
'use client'
import { useState, useRef } from 'react';
import { Editor } from '@tinymce/tinymce-react';
const Editor = () => {
const editorRef = useRef(null);
const [value, setValue] = useState<string>('');
const pluginsOptions = [
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
];
const toolbarOptions = 'undo redo | blocks | ' +
'bold italic forecolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | help';
return (
<>
<Editor
apiKey={process.env.NEXT_PUBLIC_TINYMCE_API_KEY}
onInit={(evt, editor) => editorRef.current = editor}
value={value}
onEditorChange={(newValue, editor) => setValue(newValue)}
init={{
height: 500,
menubar: false,
plugins: pluginsOptions,
toolbar: toolbarOptions,
content_style: 'body { font-size:14px }',
language: 'ko_KR',
}}
/>
</>
);
}
export default Editor;
사용 후기
아직 응-애 프엔 애기인 나에게 공식문서 보기란 어려운 관문이었고, 부분 무료임을 작업 도중에 깨닫고 긴급하게 다른 위지윅 에디터를 찾아보았다.
2. React Quill
- 찐무료 위지윅!!
tinymce에 굴하지 않는 깔끔한 UI/UX- 공식 문서 포함 ^_^ (라고 좋아했으나 너무 불친ㅈ,,ㅓ,,ㄹ)
사용 방법
npm에서 제공하는 reactQuill 패키지 다운 명령어를 복붙해준다.
npm install react-quill --save마찬가지로 npm에서 제공하는 컴포넌트 설정도 복붙해준다.
'use client'
import React, { useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
const Editor = () => {
const [value, setValue] = useState('');
return <ReactQuill theme="snow" value={value} onChange={setValue} />;
}
export default Editor;
사용 후기
사실 다른 에디터들도 있었지만 react가 붙어있어서 선택할 수 밖에 없었다. react에 잘 맞게 설계되어 있을 것만 같은,,, 나에게 신뢰감을 주는 이름이었기 때문에 홀리듯이 끌려버렸다.
다만 단점이 있다면 공식 문서 예시들이 클래스형 컴포넌트나 javascript로 이루어져 있기 때문에 알아서 잘 변환해야한다는 점,,? 여전히 공식문서는 어려웠다 ㅎ
이전에 tinymce로 조금 애를 먹어서 그런지 그래도 빠르게 적응하고 설정을 마칠 수 있었다,,ㅜ
그래도 당신이란 에디터,, 감격스러워 정말,,,
그 외에도 네이버에서 제공하는 smartEditor2와 Toast Editor, CKEditor 등 다양한 에디터들이 있으나 무료인지 아닌지 알 수 없다 ㅎ 잘 찾아본 후에 사용하길 바란다.
오늘도 행복하기만한 초보 프엔의 길,,☆
