[FrontEnd] 토스트 UI 에디터 사용해보기

ToastUI 

: NHN에서 지원하는 무료 위지윅 에디터

👇🏻토스트 UI 에디터 개요 및 튜토리얼

TOAST UI Editor 3.0이 출시되었습니다!

GitHub - nhn/tui.editor: 🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.

 

👉🏻 TOAST UI Editor는 CDN을 통해 설치없이 사용할 수 있다.

---

CodePen 

: 프론트엔드 웹 개발에 특화된 온라인 코드 편집기

https://codepen.io/pen

---

코드

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" />

<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

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

---

실행 결과

---

+ 참고하면 좋은 사이트

눈누 : 폰트를 무료로 다운받아 사용할 수 있는 사이트

위에서 사용한 폰트는 지마켓 폰트

눈누