Quill을 사용한 텍스트 에디터 구현, Node.js 예제 코드와 함께 알아보기

웹 개발을 하면서 사용자가 글을 작성할 수 있는 텍스트 에디터를 구현하는 것은 매우 중요한 요소입니다. 특히, 사진 추가, 텍스트 정렬, 구분선 등의 다양한 포맷팅 기능을 제공하는 텍스트 에디터는 사용자 경험을 크게 향상시킵니다. 이번 글에서는 Quill이라는 라이브러리를 사용하여 텍스트 에디터를 쉽게 구현하는 방법을 Node.js 예제 코드와 함께 소개합니다.

Quill 설치 및 기본 설정

먼저 Quill을 설치하고 기본 설정을 진행해보겠습니다. Node.js와 npm(Node Package Manager)이 설치되어 있어야 합니다.

Quill 설치

Quill을 설치하기 위해서는 npm을 사용합니다. 터미널을 열고 다음 명령어를 입력하여 Quill을 설치합니다.

npm install quill

설치가 완료되면 프로젝트에서 Quill을 사용할 준비가 완료됩니다.

기본 HTML 구조 설정

Quill을 사용하기 위해 기본 HTML 구조를 설정합니다. index.html 파일을 생성하고 다음과 같이 작성합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Quill 텍스트 에디터</title>
  <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
</head>
<body>
  <div id="editor-container"></div>
  <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
  <script src="app.js"></script>
</body>
</html>

이제 Quill을 초기화하고 텍스트 에디터를 생성하기 위해 app.js 파일을 생성하고 다음과 같이 작성합니다.

// app.js
var quill = new Quill('#editor-container', {
  theme: 'snow'
});

위 코드를 통해 Quill 텍스트 에디터가 기본적으로 설정됩니다.

Quill 기능 확장: 이미지 추가, 텍스트 정렬, 구분선

Quill의 기본 기능을 확장하여 이미지 추가, 텍스트 정렬, 구분선 등의 기능을 구현해보겠습니다.

이미지 추가 기능

이미지를 추가하기 위해서는 Quill의 툴바(toolbar)를 확장해야 합니다. app.js 파일을 다음과 같이 수정합니다.

// app.js
var toolbarOptions = [
  ['bold', 'italic', 'underline'],        // toggled buttons
  ['blockquote', 'code-block'],

  [{ 'header': 1 }, { 'header': 2 }],     // custom button values
  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
  [{ 'script': 'sub'}, { 'script': 'super' }],   // superscript/subscript
  [{ 'indent': '-1'}, { 'indent': '+1' }],       // outdent/indent
  [{ 'direction': 'rtl' }],                      // text direction

  [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

  [{ 'color': [] }, { 'background': [] }],        // dropdown with defaults from theme
  [{ 'font': [] }],
  [{ 'align': [] }],

  ['clean'],                                         // remove formatting button

  ['image']                                        // image insertion
];

var quill = new Quill('#editor-container', {
  theme: 'snow',
  modules: {
    toolbar: toolbarOptions
  }
});

이제 툴바에 이미지 추가 버튼이 생기고, 이를 통해 이미지를 쉽게 추가할 수 있습니다.

텍스트 정렬 기능

텍스트 정렬 기능을 추가하기 위해서는 툴바 옵션에 정렬 옵션을 포함시켜야 합니다. app.js 파일을 다음과 같이 수정합니다.

// app.js
var toolbarOptions = [
  ['bold', 'italic', 'underline'],        // toggled buttons
  ['blockquote', 'code-block'],

  [{ 'header': 1 }, { 'header': 2 }],     // custom button values
  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
  [{ 'script': 'sub'}, { 'script': 'super' }],   // superscript/subscript
  [{ 'indent': '-1'}, { 'indent': '+1' }],       // outdent/indent
  [{ 'direction': 'rtl' }],                      // text direction

  [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

  [{ 'color': [] }, { 'background': [] }],        // dropdown with defaults from theme
  [{ 'font': [] }],
  [{ 'align': [] }],                               // text alignment options

  ['clean'],                                         // remove formatting button

  ['image']                                        // image insertion
];

var quill = new Quill('#editor-container', {
  theme: 'snow',
  modules: {
    toolbar: toolbarOptions
  }
});

이제 툴바에

정렬 옵션이 추가되어 텍스트를 좌측 정렬, 중앙 정렬, 우측 정렬, 양쪽 정렬할 수 있습니다.

구분선 추가 기능

구분선을 추가하려면 툴바에 구분선 옵션을 포함시키고, Quill의 서식 기능을 활용해야 합니다. app.js 파일을 다음과 같이 수정합니다.

// app.js
var toolbarOptions = [
  ['bold', 'italic', 'underline'],        // toggled buttons
  ['blockquote', 'code-block'],

  [{ 'header': 1 }, { 'header': 2 }],     // custom button values
  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
  [{ 'script': 'sub'}, { 'script': 'super' }],   // superscript/subscript
  [{ 'indent': '-1'}, { 'indent': '+1' }],       // outdent/indent
  [{ 'direction': 'rtl' }],                      // text direction

  [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

  [{ 'color': [] }, { 'background': [] }],        // dropdown with defaults from theme
  [{ 'font': [] }],
  [{ 'align': [] }],                               // text alignment options

  ['clean'],                                       // remove formatting button

  ['image', 'divider']                            // image insertion and divider
];

var quill = new Quill('#editor-container', {
  theme: 'snow',
  modules: {
    toolbar: {
      container: toolbarOptions,
      handlers: {
        'divider': function() {
          var range = this.quill.getSelection();
          if (range) {
            this.quill.insertText(range.index, '\n', Quill.sources.USER);
            this.quill.insertText(range.index + 1, '---', Quill.sources.USER);
            this.quill.insertText(range.index + 4, '\n', Quill.sources.USER);
          }
        }
      }
    }
  }
});

이제 툴바에 구분선 추가 버튼이 생기며, 이를 클릭하면 에디터에 구분선을 추가할 수 있습니다.

Quill 텍스트 에디터 활용 예제

이제 Quill을 활용하여 텍스트 에디터를 완전히 구현한 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Quill 텍스트 에디터</title>
  <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
  <style>
    #editor-container {
      height: 300px;
    }
  </style>
</head>
<body>
  <div id="editor-container"></div>
  <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
  <script>
    var toolbarOptions = [
      ['bold', 'italic', 'underline'],        // toggled buttons
      ['blockquote', 'code-block'],

      [{ 'header': 1 }, { 'header': 2 }],     // custom button values
      [{ 'list': 'ordered'}, { 'list': 'bullet' }],
      [{ 'script': 'sub'}, { 'script': 'super' }],   // superscript/subscript
      [{ 'indent': '-1'}, { 'indent': '+1' }],       // outdent/indent
      [{ 'direction': 'rtl' }],                      // text direction

      [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

      [{ 'color': [] }, { 'background': [] }],        // dropdown with defaults from theme
      [{ 'font': [] }],
      [{ 'align': [] }],                               // text alignment options

      ['clean'],                                       // remove formatting button

      ['image', 'divider']                            // image insertion and divider
    ];

    var quill = new Quill('#editor-container', {
      theme: 'snow',
      modules: {
        toolbar: {
          container: toolbarOptions,
          handlers: {
            'divider': function() {
              var range = this.quill.getSelection();
              if (range) {
                this.quill.insertText(range.index, '\n', Quill.sources.USER);
                this.quill.insertText(range.index + 1, '---', Quill.sources.USER);
                this.quill.insertText(range.index + 4, '\n', Quill.sources.USER);
              }
            }
          }
        }
      }
    });
  </script>
</body>
</html>

위 예제는 Quill을 사용하여 다양한 텍스트 포맷팅 옵션과 이미지 추가, 텍스트 정렬, 구분선 등의 기능을 포함한 텍스트 에디터를 구현한 것입니다.

긍정적인 전망과 경제적 효과

Quill을 사용한 텍스트 에디터는 사용자 경험을 크게 향상시킬 수 있으며, 다양한 포맷팅 옵션과 기능을 제공함으로써 웹사이트나 애플리케이션의 가치를 높일 수 있습니다. 특히, 사용자가 쉽게 글을 작성하고 편집할 수 있는 환경을 제공함으로써 콘텐츠 생성 및 관리의 효율성을 높일 수 있습니다. 이는 결국 사용자 만족도를 높이고, 더 많은 방문자와 고객을 유치하는 데 기여할 것입니다.

또한, Quill은 오픈 소스 라이브러리로 무료로 사용할 수 있어 비용 효율적입니다. 이를 통해 개발 시간과 비용을 절감할 수 있으며, 프로젝트의 예산을 보다 효과적으로 관리할 수 있습니다.

마치며

Quill은 강력하고 유연한 텍스트 에디터 라이브러리로, 다양한 포맷팅 옵션과 기능을 제공하여 사용자 경험을 향상시킬 수 있습니다. 이번 글에서는 Quill을 사용하여 텍스트 에디터를 구현하는 방법을 Node.js 예제 코드와 함께 알아보았습니다. Quill을 활용하여 쉽게 텍스트 에디터를 구현하고, 웹사이트나 애플리케이션의 가치를 높여보세요. 여러분의 프로젝트에 큰 도움이 될 것입니다.

Node.js 이상적인 프로젝트 폴더 구조

Node.js 환경 변수의 효과적인 관리를 위한 .env 사용법

'Programming & Platform > Node.js' 카테고리의 다른 글

Node.js와 동기 및 비동기 처리 - 이벤트 주도 프로그래밍의 이해 (1)	2024.06.07
Node.js 이상적인 프로젝트 폴더 구조 (0)	2023.12.01
Node.js Sequelize 모델에서 외래키 지정하는 방법 (2)	2023.11.25
pm2 기초 사용법, Node.js 애플리케이션 관리를 간편하게 (0)	2023.11.18
Node.js 웹 어플리케이션 개발을 위한 패키지 설정 (0)	2023.11.16