1. 환경 설정

Quill과 quill-better-table 모듈을 설치해야 합니다.

(1) Quill 설치

먼저 Quill을 프로젝트에 추가합니다. CDN을 사용하거나 npm으로 설치할 수 있습니다.

• CDN 방식:
• html
• Collapse자동 줄바꿈복사
• <script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
• <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
• npm 방식:
• bash
• Collapse자동 줄바꿈복사
• npm install quill

(2) quill-better-table 설치

quill-better-table 모듈을 설치합니다.

• npm 방식:
• bash
• Collapse자동 줄바꿈복사
• npm install quill-better-table
• CDN 방식:
• html
• Collapse자동 줄바꿈복사
• <link href="https://unpkg.com/quill-better-table/dist/quill-better-table.css" rel="stylesheet">
• <script src="https://unpkg.com/quill-better-table/dist/quill-better-table.min.js"></script>

2. HTML 구조 준비

Quill 에디터와 표 삽입 버튼을 추가할 HTML을 작성합니다.

html

Collapse자동 줄바꿈복사

<div id="editor-toolbar">

<button id="insert-table">표 삽입</button>

<!-- 기타 툴바 버튼 추가 가능 -->

</div>

<div id="editor"></div>

3. Quill 초기화 및 quill-better-table 모듈 등록

JavaScript에서 Quill을 초기화하고 quill-better-table 모듈을 등록합니다. 표 삽입 버튼에 기능을 연결합니다.

javascript

Collapse자동 줄바꿈복사

// Quill과 quill-better-table 모듈 가져오기 (npm 사용 시)

import Quill from 'quill';

import QuillBetterTable from 'quill-better-table';

// 모듈 등록

Quill.register({

'modules/better-table': QuillBetterTable

}, true);

// Quill 에디터 초기화

const quill = new Quill('#editor', {

theme: 'snow',

modules: {

table: false, // 기본 table 모듈 비활성화

'better-table': {

operationMenu: {

items: {

// 오른쪽 클릭 메뉴 커스터마이징 (선택 사항)

unmergeCells: { text: '셀 분리' }

},

color: {

colors: ['#fff', 'red', 'yellow'], // 셀 배경색 옵션

text: '배경색'

}

}

},

keyboard: {

bindings: QuillBetterTable.keyboardBindings // 키보드 단축키 지원

}

}

});

// 표 삽입 버튼에 기능 추가

document.querySelector('#insert-table').addEventListener('click', () => {

const tableModule = quill.getModule('better-table');

tableModule.insertTable(3, 3); // 3x3 표 삽입

});

4. 주요 기능 설명

• insertTable(rows, columns): 지정된 행(rows)과 열(columns)로 표를 삽입합니다. 위 예시에서는 3x3 표를 생성합니다.
• 오른쪽 클릭 메뉴: 표에 우클릭하면 열/행 삽입, 삭제, 셀 병합/분리 등의 메뉴가 표시됩니다. operationMenu 옵션으로 커스터마이징 가능합니다.
• CSS 스타일: quill-better-table.css를 포함해야 표의 스타일이 올바르게 적용됩니다.

5. 결과 확인

• 브라우저에서 "표 삽입" 버튼을 클릭하면 에디터에 3x3 표가 추가됩니다.
• 표를 클릭하면 상단에 열 조정 도구가 나타나며, 우클릭으로 추가 메뉴를 사용할 수 있습니다.

6. 추가 팁

• 툴바에 통합: 버튼을 직접 추가하는 대신 Quill의 툴바에 표 삽입 기능을 통합하려면 toolbar 모듈을 사용합니다.
• javascript
• Collapse자동 줄바꿈복사
• const quill = new Quill('#editor', {
• theme: 'snow',
• modules: {
• toolbar: [
• ['bold', 'italic'],
• [{ 'header': [1, 2, false] }],
• ['insert-table'] // 커스텀 버튼 클래스
• ],
• table: false,
• 'better-table': true
• }
• });
• 
  
• // 커스텀 툴바 핸들러 추가
• const toolbar = quill.getModule('toolbar');
• toolbar.addHandler('insert-table', () => {
• const tableModule = quill.getModule('better-table');
• tableModule.insertTable(3, 3);
• });
• 그리고 HTML에 툴바를 추가합니다:
• html
• Collapse자동 줄바꿈복사
• <div id="editor-toolbar">
• <span class="ql-formats">
• <button class="ql-bold"></button>
• <button class="ql-italic"></button>
• </span>
• <span class="ql-formats">
• <select class="ql-header"></select>
• </span>
• <span class="ql-formats">
• <button class="ql-insert-table">표 삽입</button>
• </span>
• </div>
• <div id="editor"></div>
• 스타일 커스터마이징: quill-better-table.css를 수정하거나 별도의 CSS를 추가해 표의 모양을 변경할 수 있습니다.

7. 제한사항

• Quill 2.0 이상에서 기본 table 모듈을 사용할 수도 있지만, 기능이 제한적입니다(예: 행/열 추가 불가). quill-better-table이 더 유연합니다.
• CDN 방식 사용 시, Quill과 quill-better-table 버전 호환성을 확인하세요.