[라이브러리]ngx-quill : 텍스트 에디터 Angular Module

# 개요

Angular Version 2 이상을 지원하는 Rich Text Editor의 모든 기능을 가진 Component(<quill-editor> 정의)를 포함한 Angular Module이다.

1.2k 이상의 github star

# 기본 셋팅

1. npm install --save ngx-quill (Version 5 이상)

   npm install ngx-quill@1.6.0 (Version 5 미만)

2. ngx-quill 내에 Dependency가 존재하는 Angular Module들을 설치[자동으로 설치될 듯?]

- @angular/core : 기본 Angular 구성요소들을 정의하는 Angular Framework 핵심 모듈

- @angular/common : Angular Framework 중 기본 기능과 관련된 모듈

- @angular/forms : Angular Framework 중 forms과 관련된 Component들을 모아놓은 모듈

- @angular/platform-browser : Angular Framework 중 browser 모듈

- quill 

- rxjs : observable, subscribe 방식을 활용하여, reactive한 방식을 제공하는 모듈

3. theme style css/scss 파일 설정

- 방법1: quill.js의 기본 bubble.css, snow.css를 index.html  상에 정의

- 방법2: custom css를 global.stylesheet.css 내에 @import 문법으로 매핑

- 방법3: build process(angular.json 내 styles 속성?) 상에 external styling 속성으로 삽입 //Theme 기본값은 snow

angular.json 中

...

"styles": [

              "./node_modules/quill/dist/quill.core.css",

              "./node_modules/quill/dist/quill.snow.css",

...

- 방법4: (angular-cli가 버전 6 이상일 경우) angular.json 내에 scripts section 내에 quill.js 파일 경로를 추가 (global로 적용이 필요할 경우)

angular.json 中

...

"scripts": [

              "./node_modules/quill/dist/quill.min.js",

...     

       

# 적용법

(모듈명).module.ts 中

import { QuillModule } from 'ngx-quill'

@NgModule({

  imports: [

    ...,

    QuillModule.forRoot()

  ],

  ...

})

class YourModule { ... }

(모듈명).component.html 中

...

<quill-editor></quill-editor> or <quill-view></quill-view>

..

상단 theme styling 필수

# 상세 Config 적용

(모듈명).module.ts 中

QuillModule.forRoot({

      modules: {

        syntax: true,

        toolbar: [...]

      }

    })

상세 : https://quilljs.com/docs/configuration/

# 사용 예제

<quill-editor>

  <div quill-editor-toolbar>

    <span class="ql-formats">

      <button class="ql-bold" [title]="'Bold'"></button>

    </span>

    <span class="ql-formats">

      <select class="ql-align" [title]="'Aligment'">

        <option selected></option>

        <option value="center"></option>

        <option value="right"></option>

        <option value="justify"></option>

      </select>

      <select class="ql-align" [title]="'Aligment2'">

        <option selected></option>

        <option value="center"></option>

        <option value="right"></option>

        <option value="justify"></option>

      </select>

    </span>

  </div>

</quill-editor>

- 기본 Text View

<quill-view [content]="content" format="text" theme="snow"></quill-view>

- 기본 HTML View

<div class="ql-container ql-snow" style="border-width: 0;">

  <div class="ql-editor" [innerHTML]="byPassedHTMLString">

  </div>

</div>

<quill-view-html [content]="htmlstring" theme="snow"></quill-view-html>