[front] TOAST UI, CodePen - 뷰어, 플러그인

세상을 바꾸는 개발자·2023년 3월 7일

[TOAST UI - 뷰어] https://github.com/nhn/tui.editor/blob/master/docs/ko/viewer.md

뷰어(Viewer)

TOASE UI Editor(이하 'Editor'라고 명시)는 에디터를 로딩하지 않고 마크다운 콘텐츠를 보여줄 수 있도록 뷰어를 제공한다. 뷰어가 에디터보다 훨씬 더 가볍다.

뷰어전용 라이브러리로 뷰어 2개 만들기

링크 넣을 때는 [<링크 내용>](<링크 주소>)
- [네이버](https://www.naver.com)
이미지를 넣을 때는 ![img : <이미지 내용>]<이미지 주소>
- ![img : 구글로고](https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png)

[HTML]

<script src="https://uicdn.toast.com/editor/latest/toastui-editor-viewer.js"></script>
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor-viewer.min.css" />

<h1>뷰어 1</h1>
<div id="viewer-1"></div>

<h1>뷰어 2</h1>
<div id="viewer-2"></div>

[JS]

const Viewer = toastui.Editor;

const viewer1 = new Viewer({
  el: document.querySelector("#viewer-1"),
  initialValue: `
  # 안녕하세요.
  ## 반가워요.
  - 하하
  - 호호
  - 히히
  `
});

const viewer2 = new Viewer({
  el: document.querySelector("#viewer-2"),
  initialValue: `
  [네이버](https://www.naver.com)
  ![img : 구글로고](https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png)
  `
});

에디터 라이브러리로 뷰어 2개 만들기

에디터에 이미 뷰어 기능이 포함되어 있다. (단, 에디터와 뷰어가 동시에 로드되지 않도록 주의해야 한다.)
Editor.factory() 정적 메서드를 사용하여 뷰어를 사용할 수 있다. (viewer : true)
뷰어 전용 라이브러리 → 에디터 라이브러리 전환

[HTML]

<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />

<h1>뷰어 1</h1>
<div id="viewer-1"></div>

<h1>뷰어 2</h1>
<div id="viewer-2"></div>

[JS]

const Editor = toastui.Editor;

const viewer1 = Editor.factory({
  el: document.querySelector("#viewer-1"),
  viewer: true,
  initialValue: `
  # 안녕하세요.
  ## 반가워요.
  - 하하
  - 호호
  - 히히
  `
});

const viewer2 = Editor.factory({
  el: document.querySelector("#viewer-2"),
  viewer: true,
  initialValue: `
  [네이버](https://www.naver.com)
  ![img : 구글로고](https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png)
  `
});

폰트 적용

눈누 - Gmarket Sans
[웹폰트로 사용] - 소스코드 복사 (폰트 로딩)
html > body { font-family: "GmarketSansMedium";} 폰트 적용을 해도 적용이 안될 경우
- html > body, html > body .toast-editor-contents { font-family: "GmarketSansMedium";}
- , 는 or의 뜻
코드 폰트까지 변경 시

html > body,
html > body .toastui-editor-contents,
html > body .toastui-editor-contents code,
html > body .toastui-editor-contents pre {
font-family: "GmarketSansMedium";
}`
폰트 로딩

/* 폰트 로딩 */
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* 이미 토스트ui관련해서 폰트가 지정되어 있어서, 아래처럼 선택자를 길게 써야, 우리가 원하는 폰트가 적용된다. */
html > body, /* body 와 */
html > body .toastui-editor-contents { /* body 하위에 있는 .toastui-editor-contents 에 */
  font-family: "GmarketSansMedium"; /* 폰트변경 */
}

template 엘리먼트 사용하여 소스코드 편하게 작성

[JS] 에서 initialValue : 안에 작성하는 게 불편함 -> [HTML]에서 template 엘리먼트 사용
HTML, JS 변경
codepen

[HTML]

<script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
<link rel="stylesheet" href="https://uicdn.toast.com/editor/latest/toastui-editor.min.css" />

<template id="viewer-1-template">
  # 안녕하세요.
  ## 반가워요.
  - 하하
  - 호호
  - 히히
</template>
<div id="viewer-1"></div>

[CSS]

body {
  margin: 0;
}

@font-face {
  font-family: "GmarketSansMedium";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

#viewer-1 {
  padding: 0 10px;
}

html > body,
html > body .toastui-editor-contents {
  font-family: "GmarketSansMedium";
}

[JS]

console.clear();

const Editor = toastui.Editor;

// id가 'viewer-1-template' 인 엘리먼트를 찾는다.
const viewer1TemplateEl = document.querySelector("#viewer-1-template");
const viewer1MarkdownSource = viewer1TemplateEl.innerHTML; // 포함하고 있는 내용

console.log("viewer1MarkdownSource : " + viewer1MarkdownSource);

const viewer1 = Editor.factory({
  el: document.querySelector("#viewer-1"),
  viewer: true,
  initialValue: viewer1MarkdownSource
});

코드 신택스 하이라이터 플러그인 적용

[TOAST UI EDITOR - 플러그인] https://github.com/nhn/tui.editor/blob/master/docs/ko/plugin.md
신택스 하이라이터 플러그인 라이브러리 추가
plugins: [[toastui.Editor.plugin.codeSyntaxHighlight, { highlighter: Prism }]] 추가
codepen

<!-- 신택스 하이라이터 플러그인 라이브러리 -->
<link rel="stylesheet" href="https://uicdn.toast.com/editor-plugin-code-syntax-highlight/latest/toastui-editor-plugin-code-syntax-highlight.min.css">
<script src="https://uicdn.toast.com/editor-plugin-code-syntax-highlight/latest/toastui-editor-plugin-code-syntax-highlight-all.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">

katex 플러그인 직접구현하여 적용

katex 플러그인 라이브러리 추가

<!-- katex 플러그인 라이브러리 시작 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.13/katex.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.13/katex.min.css">
<!-- katex 플러그인 라이브러리 끝 -->

function katexPlugin() {
  const toHTMLRenderers = {
    katex(node) {
      console.log("HI");

      let html = katex.renderToString(node.literal, {
        throwOnError: false
      });

      return [
        { type: "openTag", tagName: "div", outerNewLine: true },
        { type: "html", content: html },
        { type: "closeTag", tagName: "div", outerNewLine: true }
      ];
    }
  };

template 내용에 stripindent 적용

katex 경우 앞에 공백이 없어야 마크다운 적용이 되는데, template 특성상 공백이 생김
stripindent를 이용하여 앞에 공백을 지워줌

function stripIndent(str) {
  const lines = str.split("\n");
  let minIndent = Infinity;

  // 첫 번째 줄 이후의 각 줄에서 가장 작은 들여쓰기 값을 찾습니다.
  for (let i = 1; i < lines.length; i++) {
    const line = lines[i];
    const indent = line.search(/\S/); // 첫 번째 비공백 문자의 인덱스를 찾습니다.

    if (indent !== -1 && indent < minIndent) {
      minIndent = indent;
    }
  }

  // 모든 줄에서 가장 작은 들여쓰기 값을 뺍니다.
  if (minIndent !== Infinity) {
    for (let i = 0; i < lines.length; i++) {
      lines[i] = lines[i].slice(minIndent);
    }
  }

  // 결과 문자열을 반환합니다.
  return lines.join("\n");
}

UML 플러그인 적용

uml 플러그인 라이브러리 추가
[toastui.Editor.plugin.uml, { rendererURL: "http://www.plantuml.com/plantuml/svg/" }]
plantuml 사이트 참고
codepen

<!-- uml 플러그인 라이브러리 시작 -->
<script src="https://uicdn.toast.com/editor-plugin-uml/latest/toastui-editor-plugin-uml.min.js"></script>
<!-- uml 플러그인 라이브러리 끝 -->