Toast UI Editor 에 color 플러그인 탑재하기 [ Angular.js ]

전편에서 잘 작동하는 editor 를 확인하였다.

 

 

토스트 ui 버전 2로 업데이트 되면서, NHN은 토스트ui 라이브러리 경량화를 위해서 색상,차트 등의 기능들은

플러그인으로 따로 뽑아놓았다.

 

따라서 만약 기본 뷰어를 사용하다가 폰트색상, 차트그리기 등의 기능이 필요하다면 우리는 그떄 플러그인을 뷰어셋팅때 꼽아주면 된다. (말그대로 plug in)

 

다음의 과정을 거치면 뷰어에 color셋팅하는 버튼이 생기는 것을 확인 해볼수 있다.

 

1. 라이브러리 다운로드

$ npm install @toast-ui/editor-plugin-color-syntax --save

2. viewer 셋팅때 plugin으로 탑재.

    editor = new Editor({
      el: document.querySelector('#editor'),
      height: '500px',
      initialEditType: 'markdown',
      previewStyle: 'vertical',
      plugins: [colorSyntax],   ///////////////////////이렇게 추가해주면 된다.!!!
    });

2. css추가.

editor.component.html 의 header에 다음을 추가.

 <link
    rel="stylesheet"
    href="https://uicdn.toast.com/tui-color-picker/latest/tui-color-picker.min.css"
  />

 

3. 하고나면 다음과 같이 버튼이 추가된것을 확인 할 수 있다.