[TOAST UI Editor] 토스트 UI 기본적인 화면 구현하기

 

 

프로젝트를 위해 토스트 UI 에디터를 사용하게 되었다.

처음에는 엄청나게 큰 산처럼 느껴졌었는데, API 문서를 차근 차근 읽어보니 성공할 수 있었다! 😜

 

* 다들 어렵지 않게 성공했다고 하는데, 이 부분은 동의하면서도 비동의한다.

처음에는 그런거 모르겠고 다 어렵거든요 😂

일단 두어번 하면 숨쉬듯 할 수 있을 거라는 믿음을 가지고 꼭 성공해보길 바랍니다!

 

 

 

---

토스트 UI 새로운 버전인 V3.0을 기준으로 작성했다.

API문서를 토대로 V2.0과 차이점을 비교해보면 좋을 것 같아서 같이 가져왔다!

 

 

의존성 정보 변경

에디터 3.0에서는 v2.x에서 사용하던 의존성 모듈들이 제거되었다. 만약 CDN 환경에서 개발하고 있다면, v2.x에서 사용하던 CodeMirror 의존성 코드는 더 이상 필요없으니 제거해야 한다. 3.0에서는 Prosemirror와 관련된 의존성 모듈들이 추가되었지만, 이는 CDN 번들에 모두 포함되기 때문에 별도로 추가할 필요가 없다.

 

😏 CDN 방식을 사용한다면 의존성 코드는 불필요하니 v2.0의 코드가 변경 되었다는 이야기 같다.

 

Head 영역

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

 

Body 영역

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

 

---

툴바 커스터마이징

toolbarItems 옵션이 기존 v2.x에 비해 더 간결하고 선언적으로 변경되었다. v3.0에서는 각 툴바 아이템과 툴바 그룹을 2차원 배열 형태의 옵션으로 정의한다. 이 방식은 그룹을 구분하기 위해 divider라는 불필요한 요소를 옵션으로 넘겨 정의하던 기존 방식보다 훨씬 간결하고 명확하다.

 

😏 2차원 배열로 툴바 아이템과 툴바 그룹을 간략하게 정의했다는 뜻인가보다. 

 

v3.0에 있는 내용을 그대로 복붙했는데도 오류가 나서 왜그런가.. 하고 보니까

브라우저 콘솔창에 '너..! editor를 선언하지 않았어..!'라는 문구가 떴다.

알고보니 const Editor = toastui.Editor;를 선언하지 않았던 것..! 😂

 

 

<script>

  const Editor = toastui.Editor;
  const  editor = new Editor({
      el: document.querySelector('#editor'),
      toolbarItems: [
     	 ['heading', 'bold', 'italic', 'strike'],
      	['hr', 'quote'],
      ],
  });

</script>

 

실행 화면

👍 제일 기본적으로 보여지는 화면 ! 여기에 원하는 기능들을 추가하면 된다.

 

---

 

우선 세로 600px에 미리 보기 기능이 필요해서 다음과 같이 커스텀 마이징 해주었다.

<script>
    const Editor = toastui.Editor;
      const  editor = new Editor({
        el: document.querySelector('#editor'),
        toolbarItems: [
        ['heading', 'bold', 'italic', 'strike'],
        ['hr', 'quote'],
        ],
      height: '600px',
      previewStyle: 'vertical'
    });
</script>

 

수정된 실행 화면

😁 여기에 이것 저것 붙여나가면 될 것 같다

 

---

잠깐만요!

😂 툴바 전체 기능 다 사용하려면 다음과 같이 기술하면 된다!

<script>
	 const Editor = toastui.Editor;
     const  editor = new Editor({
       el: document.querySelector('#editor'),
       height: '600px',
       previewStyle: 'vertical',
     });
</script>

 

왜냐면 기본적으로 16개 모두를 제공하기 때문이다.

 

커스텀 마이징은 불필요하다고 여겨지는 항목이 있다면 사용하면 될 것 같다!

 

실행화면

이 화면 보려고 돌고 돌아 다시 원래의 코드로 왔다 😂 

 

 

 

---

토스트 UI 한국어 API

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

 

 

TOAST UI Editor 3.0이 출시되었습니다! | TOAST UI :: Make Your Web Delicious!

 

 

툴바 커스텀마이징

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

 

 

 

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