TOAST UI Editor 유튜브 익스텐션 개발하기

[원본] https://forward.nhn.com/2019/seoul/hands-on-labs/toastui.editor-ext/index.html

  • 카테고리: javascript
  • 레벨: 초급
  • 시간: 15분
  • 업데이트: 2019.10.17

1. 개요

TOAST UI Editor는 FE개발랩에서 개발한 오픈소스 자바스크립트 라이브러리입니다. TOAST UI Editor를 사용해 마크다운과 위지윅 모드로 사용자가 원하는 환경에서 문서를 편집할 수 있습니다. 이번 핸즈온 랩스에서 TOAST UI Editor를 경험해보고 서비스에 직접 적용해 보세요!

1.1. 학습할 내용

  • TOAST UI Editor 유튜브 익스텐션 개발하기

1.2. 준비물

  • 익숙한 편집기
  • Node.js
  • 크롬 브라우저

1.3. 소스 코드

2. TOAST UI Editor 설치 및 서버 실행하기

2.1. 프로젝트 설치

터미널을 열어 미리 준비된 프로젝트를 클론 받습니다.

git clone https://github.com/nhn/hands-on-labs.toastui.editor-ext

2.2. TOAST UI Editor 설치

TOAST UI Editor는 npm 으로 제공됩니다. 아래와 같이 프로젝트 폴더로 이동한 후 패키지와 TOAST UI Editor를 설치합니다.

cd hands-on-labs.toastui.editor-ext
npm install
npm install tui-editor

2.3. 개발 서버 실행

번들러는 Webpack 을 사용하고 webpack-dev-server 를 사용하여 개발 서버를 설정해 두었습니다. 아래와 같이 간단히 개발 서버를 실행하고 브라우저로 http://localhost:8080 에 접속합니다. 앞으로 실습하는 모든 결과는 이 개발 서버에서 확인합니다.

npm run serve

3. 에디터 생성하기

3.1. HTML 초기 코드 작성

준비된 src/index.html 파일을 열어 body 태그 내부에 컨테이너 태그를 작성해 줍니다.

// src/index.html

<body>
  ...
  <div id="editor"></div>
  ...
</body>

3.2. 자바스크립트 초기 코드 작성

1. 인스턴스를 생성해봅니다. 이때 반드시 기본 옵션을 파라미터로 넘겨주어야 합니다. src/index.js 파일을 열고 다음 코드를 추가해봅니다.

  • 기본 옵션 정보
    • el : 에디터가 생성되는 컨테이너 엘리먼트 지정
    • initialEditType : 에디터 초기 모드를 지정 ('markdown' 또는 'wysiwyg')
    • previewStyle : 마크다운 모드는 편집 중인 콘텐츠의 모습을 미리 볼 수 있는 프리뷰의 UI 형태를 지정 ('tab' 또는 'vertical')
    • height : 에디터 편집 영역의 높이 지정
    • initialValue : 에디터에 초기 콘텐츠 값을 마크다운 텍스트로 지정
  • 더 많은 옵션 보기 : 링크
// src/index.js import ‘codemirror/lib/codemirror.css’; // codemirror 스타일 import ‘highlight.js/styles/github.css’; // code block highlight 스타일 import ‘tui-editor/dist/tui-editor.css’; // 에디터 기본 UI 스타일 import ‘tui-editor/dist/tui-editor-contents.css’; // 에디터 콘텐츠 영역 스타일 import Editor from ‘tui-editor’; const editor = new Editor({ // 에디터 인스턴스 생성 el: document.querySelector(‘#editor’), initialEditType: ‘markdown’, previewStyle: ‘vertical’, height: ‘500px’ });

2. 개발 서버에 접속한 브라우저에서 에디터가 생성되었는지 확인합니다. 코드를 수정하면 브라우저는 자동으로 리프레시됩니다.

3.3. 결과 화면

_images/step03.png

4. 콘텐츠 저장과 로드하기

TOAST UI Editor는 기본적으로 마크다운 텍스트로 입력받고 출력합니다. 에디터를 사용하는 유저는 마크다운 모드에서 혹은 위지윅 모드에서 문서를 편집할 수 있지만 편집된 내용을 저장할 때는 마크다운 텍스트로 저장됩니다. 하지만 개발 편의를 위해 HTML 데이터를 입력하거나 출력할 수 있는 API도 제공하고 있습니다.

index.js 파일 하단에 아래의 코드를 입력해 각 API 호출 결과를 확인해 봅니다.

4.1. HTML

  • setHtml(html) : 인자로 전달하는 HTML 텍스트로 에디터의 콘텐츠를 변경합니다.
  • getHtml() : 현재 편집 중인 콘텐츠를 HTML 텍스트로 받습니다.
editor.setHtml('<h1>Hello TOAST UI Editor!</h1>');

alert(editor.getHtml());

4.2. Markdown

  • setMarkdown(markdown) : 인자로 전달하는 마크다운 텍스트로 에디터의 콘텐츠를 변경합니다.
  • getMarkdown() : 현재 편집 중인 콘텐츠를 마크다운 텍스트로 받습니다.
editor.setMarkdown('# Hello NHN Forward!');

alert(editor.getMarkdown());

4.3. 결과 화면

4.3.1. HTML API 호출 결과

_images/step04-1.png

4.3.2. 마크다운 API 호출 결과

_images/step04-2.png

5. 익스텐션 추가하기

TOAST UI Editor는 에디터에서 제공하는 API들을 통해 기능을 확장 할 수 있습니다. 그런 확장 기능들을 익스텐션 이라고 합니다. Scroll Sync, Color, Table 등의 기능들은 에디터에 내장된 것이 아닌 익스텐션으로 구현되어 상황에 따라 넣고 빼고 할 수 있습니다. 특정 기능들은 시스템 리소스를 많이 사용해야 할 수밖에 없습니다. 물론 기능이 많을수록 성능에 영향을 줄 수 있습니다. 이런 기능들은 익스텐션으로 구현하면 필요한 상황에서만 사용하고 필요 없는 경우는 쉽게 제거할 수 있습니다.

익스텐션을 정의하고 사용하는 방법을 익혀봅시다.

– 주의 : 이전 스텝에서 실습했던 API 호출 코드는 제거하고 작성합니다.

5.1. 익스텐션의 정의

익스텐션은 에디터의 정적 메서드 인 defineExtension() 메서드를 사용해 정의합니다. 익스텐션의 이름과 익스텐션을 정의할 함수를 인자로 전달합니다. 익스텐션 정의 함수는 해당 익스텐션을 사용하는 에디터가 생성될 때마다 실행되며 인자로 인스턴스를 전달받습니다. 해당 인스턴스를 API를 통해 확장할 수도 있습니다.

index.js 파일을 열어 에디터를 생성하는 코드 위쪽에 아래의 코드를 입력합니다. 에디터 인스턴스를 생성하기 전에 익스텐션을 정의해야 사용할 수 있습니다.

그리고 익스텐션이 정상적으로 정의되었는지 확인하기 위해, 익스텐션 정의 함수 안에 setMarkdown API를 호출하여 에디터 콘텐츠를 변경하는 코드를 추가해봅니다.

// ...

import Editor from 'tui-editor';

Editor.defineExtension('myExt', instance => { // 익스텐션 정의
  instance.setMarkdown('# Hello Hands on Labs!');
});

const editor = new Editor({ // 에디터 인스턴스 생성
  el: document.querySelector('#editor'),
  initialEditType: 'markdown',
  previewStyle: 'vertical',
  height: '500px'
});

5.2. 익스텐션의 사용

에디터에서 사용하고자 하는 익스텐션은 에디터를 생성 옵션 exts 에 익스텐션의 이름의 배열로 전달합니다. 에디터 생성 옵션 exts 를 추가하고 위에서 정의한 익스텐션 이름을 입력합니다. index.js 파일의 에디터 생성 코드를 수정해 익스텐션이 실행되는지 확인해 봅니다.

// ...

const editor = new Editor({
  el: document.querySelector('#editor'),
  initialEditType: 'markdown',
  previewStyle: 'vertical',
  height: '500px',
  exts: ['myExt'] // 익스텐션 옵션 추가
});

5.3. 결과 화면

_images/step05.png

6. 유튜브 익스텐션 개발하기

이제 간단한 익스텐션을 개발해보겠습니다. 기능은 간단한 문법으로 유튜브 영상을 콘텐츠에 포함할 수 있는 익스텐션 입니다. 이 익스텐션을 구현하기 전에 필요한 API부터 확인해 보겠습니다.

– 주의 : 이전 스텝에서 실습했던 〈myExt〉 익스텐션 추가 코드는 제거하고 작성합니다.

6.1. codeBlockManager 사용

codeBlockManager 은 마크다운 코드의 코드 블록에 관련된 기능들이 모여있는 모듈입니다.

마크다운 코드 블록을 확장해서 코드 블록이 유튜브 영상으로 변환되도록 만들 것입니다. 아래 코드와 같이 codeBlockManager 의 setReplacer 메서드를 사용합니다. 코드 블록 사용 언어로, 'youtube' 를 사용합니다.

// ...

Editor.defineExtension('youtube', () => {
  Editor.codeBlockManager.setReplacer('youtube', code => `play youtube id: ${code}`);
});

const editor = new Editor({
  // ...,
  exts: ['youtube']
});

브라우저가 리프레시되면 익스텐션 동작을 확인하고, 마크다운 에디터에 직접 아래 코드 블록을 입력해봅니다.

```youtube
Hello TOAST UI Editor!
```

프리뷰 창을 확인하면 마크다운 코드 블록에 입력한 내용이 익스텐션에 의해 변환되어 출력됩니다.

6.2. 유튜브 영상 추가

이제 유튜브 동영상으로 변환해봅니다.

유튜브 동영상은 iframe 으로 쉽게 삽입할 수 있지만 보안 이슈로 TOAST UI 에디터는 iframe 을 모두 제거합니다. 그래서 div 를 하나 만들고 다음 프레임에 iframe 을 추가합니다.

// ...

Editor.defineExtension('youtube', () => {
  Editor.codeBlockManager.setReplacer('youtube', youtubeId => {
    const wrapperId = `yt${Math.random().toString(36).substr(2, 10)}`;

    setTimeout(renderYoutube.bind(null, wrapperId, youtubeId), 0);

    return `<div id="${wrapperId}"></div>`;
  });
});

function renderYoutube(wrapperId, youtubeId) {
  const el = document.querySelector(`#${wrapperId}`);
  el.innerHTML = `<iframe width="420" height="315" src="https://www.youtube.com/embed/${youtubeId}"></iframe>`;
}

// ...

에디터에서 코드 블록을 수정합니다. 코드 블록 내용에 유튜브 영상 주소 를 입력합니다.

```youtube
xu70m8pOZJE
```

마지막으로 프리뷰창을 확인하면 유튜브 영상이 나올 것입니다.

6.3. 결과 화면

_images/step06.png

축하합니다. TOAST UI Editor의 첫 익스텐션을 완성했습니다! 🎉

7. 정리

7.1. 학습한 내용

  • TOAST UI Editor를 설치하고 생성해 보았습니다.
  • TOAST UI Editor의 확장 기능을 구현해 보았습니다.

7.2. 다음 단계

  • TOAST UI Calendar로 시간표 만들기
  • TOAST UI Chart를 사용해 차트 대시보드 만들기
  • TOAST UI Grid로 가계부 만들기

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다