윤선이와 블로그 만들기_3. 에디터(Toast UI Editor) 붙이기

지난 시간에 스프링부트 위에 리액트를 얹는 것까지 해보았다.

 

나의 목표는 뭐다? 윤선이에게 블로그를 만들어주기!

블로그란? web + log이다.

log란? 기록이다!

기록을 어떻게 하냐? 써서 하지

그럼 뭘해야하냐? 쓸 수 있게 해야지?

쓸 수 있게 어떻게 할거냐? 갖다써서 할거다 오케

 

내가 지금 글을 쓰는 티스토리를 포함해서 네이버 블로그, 뭐시기 블로그 등등 다양한 블로그들은 여러 기능을 지원하는 에디터를 가지고 있다. 

그리고 많은 오픈소스 에디터들이 웹에 산재해있으며 우린 그걸 잘 가져다가 쓰기만하면

직접 구현하는 것보다 훨씬 쉽게 에디터를 내 웹에서 구현할 수 있다.

 

내가 가져다 쓸 에디터는

https://github.com/nhn/tui.editor

nhn/tui.editor

NHN에서는 TOAST라는 서비스를 하고 있는데, 이쪽에서 많은 오픈소스를 만들고 있다.

내가 오늘 붙일 에디터도 요쪽에서 만든 에디터이다.

이번엔 이 에디터를 사용하고, 값을 얻어보는 것까지 해볼 것이다.

 

왜 얘로 골랐냐?

그건요 왜냐하면...

우리가 지난번에 작업하던 소스에서

Index라는 폴더를 만들고, 아래에 Index.jsx를 만들었다.

딱히 중요한 역할을 할 친구는 전혀 아니고, 그냥 만들고 싶어서 만들었다.

 

App.js에 넣어주었다

요로시코롬

 

이야 잘 나온다

 

그럼 이제 진짜 에디터를 붙여보자

 

TOAST UI Editor는 이러한 패키지들을 가지고 있다.

플러그인들이 뭐하는 애들인지는 나중에 직접하면서 알아보기로 하고

우선은 에디터부터 설치해보자.

 

우리는 리액트를 쓰니까 리액트용으루다가 래핑된 애를 설치해보자

yarn add @toast-ui/react-editor

그럼 주르륵 주르륵 하더니 뭐가 깔렸다.

이러면 기본적인 설치는 끝!

 

 

Index 컴포넌트를 만들때와 마찬가지로 Write라는 폴더를 하나 만들고 그 안에 Write.jsx를 생성했다.

그리고 아래와 같은 코드를 작성했다.

import React, { useState, useEffect } from 'react';

// TOAST UI Editor import
import 'codemirror/lib/codemirror.css';
import '@toast-ui/editor/dist/toastui-editor.css';
import { Editor } from '@toast-ui/react-editor';

function Write() {

    return (
        <>
            <Editor
                initialValue="헬로헬로 나는 에디터야"
                usageStatistics={false}
            />
        </>
    )
}

export default Write;

우리가 에디터를 사용하기 위해서는 당연하게도 방금 설치한 모듈을 import 시켜야한다.

Editor가 가지고 있는 옵션 (ex. initialValue, usageStatistics ...) 들은 아래 링크에서 자세히 확인할 수 있다.

 

https://nhn.github.io/tui.editor/latest/ToastUIEditor

https://nhn.github.io/tui.editor/latest/ToastUIEditor/

이렇게 하고 App.js에 

이렇게 추가해주면

 

이렇게 간단하게 에디터를 추가할 수 있다.

와!

 

근데 이상한건 처음부터 글이 중앙에 써져있다는 것이다.

App.js를 보면 Write 컴포넌트가 속해있는 div에 App 이라는 클래스네임이 먹여진것을 볼 수 있는데

App 클래스에는 text-align: center 속성이 먹혀있어서 그렇다.

 

귀찮은 부분일 수도 있겠지만 잘 써먹으면 다양하게 응용이 가능할 것 같다.

 

그래서...좀 보니까 이상한 점이 있었다.

왜 글씨색을 변경하는게 없을까?

 

토스트 UI 에디터는 이렇게 설명하고있다.

전문: https://ui.toast.com/weekly-pick/ko_20200318

 

않이 그럼 모든 기능을 다 만들어서 써야되나요?

놀란(직업: 영화감독) 다람쥐: 구라 ㄴ

그건 아니고 5개의 기본 플러그인들을 제공하고 있다.

저기 보면 color-syntax라는 플러그인이 에디터에서 색을 넣을 수 있게 해주는 아이다.

근데 귀찮으니까 한꺼번에 다 깔도록 하자

yarn add @toast-ui/editor-plugin-chart @toast-ui/editor-plugin-code-syntax-highlight @toast-ui/editor-plugin-color-syntax @toast-ui/editor-plugin-table-merged-cell @toast-ui/editor-plugin-uml

나불나불...

 

그리고 나서 해야할 일은 Editor 컴포넌트의 Plugins 옵션을 주는 것이다.

import React, { useState, useEffect } from 'react';

// TOAST UI Editor import
import 'codemirror/lib/codemirror.css';
import '@toast-ui/editor/dist/toastui-editor.css';
import { Editor } from '@toast-ui/react-editor';

// TOAST UI Editor Plugins
import 'tui-chart/dist/tui-chart.css';
import chart from '@toast-ui/editor-plugin-chart';
import 'highlight.js/styles/github.css';
import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight';
import 'tui-color-picker/dist/tui-color-picker.css';
import colorSyntax from '@toast-ui/editor-plugin-color-syntax';
import tableMergedCell from '@toast-ui/editor-plugin-table-merged-cell';
import uml from '@toast-ui/editor-plugin-uml';

function Write() {

    return (
        <>
            <Editor
                initialValue="헬로헬로 나는 에디터야"
                usageStatistics={false}
                plugins={[chart, codeSyntaxHighlight, colorSyntax, tableMergedCell, uml]}
            />
        </>
    )
}

export default Write;

 

이걸 다 알려줬네

머박사건

 

이렇게 에디터에 추가기능이 생기면서 기능이 한층 풍부해졌음을 알 수 있다.

 

풍부해진 다람쥐

 

이렇게 에디터까지 달아보았다.

휴 ^^ 증말 많네?

ㅋㅋ;

 

아무튼 이제 사용자가 작성한 글의 내용을 가져와보도록 하자.

 

야! 너 문법 잘 알아? 난 잘 몰라!

 

useRef를 이용해서 에디터를 가리킬 ref 변수를 하나 만든다.

그리고 그 ref 변수를 Editor 컴포넌트의 옵션으로 넘겨주도록 하자.

 

그 뒤에 Editor 컴포넌트를 가리키는 ref의 인스턴스를 얻어 사용하면 된다.

Toast UI Editor의 소개글을 잘 읽어보면 알겠지만, 토스트 에디터는 기본적으로 마크다운을 사용하고 있다.

그렇지만 HTML으로도 값을 가져올 수 있게 되어있다. 음 좋아좋아루

 

마찬가지로 setMarkdown, setHtml을 사용하면 에디터에 글을 세팅할 수 있다.

 

아래는 getMarkdown과 getHtml의 출력 예시이다.

콘솔창에 아주 잘 찍힌다.

오졌다리