Firebase 배우기 45 – 웹용 에디터 Quill의 추가 기능 설정하기

앞선 글에서(https://blog.naver.com/mythee1/223557373495) 웹용 WISYWIG 에디터로 Quill과 CKEditor를 비교하여 소개하고, 이 중, 내가 Quill을 선택하여 사용하게 되었다는 것을 소개한 바 있었다.

​

그런데, Quill은 사용이 쉽고 간단하지만, 비교적 기본 메뉴 화면은 다음과 같이 단순하고,

기능이 있음에도, 툴 박스에 기본적으로는 설치되지 않는 기능들도 있어, 이를 추가적으로 설정하여 활성화시켜줄 필요가 있다.

​

Quill을 사용하는 기본적인 방법은

1. 먼저 HTML Head 부분에서 다음과 같이 Quill의 사용과, 이미지 조절을 위한 라이브러리를 설치하고

​

2. 다음과 같이 Script 초반부에 Quill 사용을 선언해 주면 되는데,

이 부분은 Quill 선언부, 아이콘을 생성하는 toolbar 부분과, 실제 기능을 지정하는 format 부분으로 구성된다. 특정 기능을 추가하려면, toolbar와 format 부분에 모두 해당 기능을 추가해 주어야 한다.

​

toolbar 부분은 편집기 toolbar에 표시되는 아이콘만을 의미하므로, toolbar에만 특정 기능을 포함시키고 format 부분에 해당 기능을 포함시키지 않으면 아이콘은 생성되어 표시되지만 동작하지 않게 된다. 반대로 format에는 특정 기능을 포함시키더라도, toolbar에 포함시키지 않으면 해당 기능에 접근하지 못하는 문제가 발생한다.

​

1. 아이콘 배열 순서

다음과 같이 에디터 화면에서 각종 기능에 대한 아이콘의 배열 순서를 원하는 대로 변경할 수가 있는데,

이 수서는 다음과 같이 스크립트에서 toolbar 부분에 지정하는 순서를 따르게 된다. 즉, 에디터 화면의 아이콘 순서를 바꾸고 싶을 때는 이 부분에서 상대적인 수서를 바꾸어주면 된다.

​

​

2. 글자 크기 종류 추가

-다음과 같이 글자의 크기를 조절하는 데 사용될 수 있는 header는 기본적으로는 크기가 다양하지 않은데, 다음과 같이 여러 가지의 사이즈를 추가적으로 header를 이용해 좀 더 다양하게 지정해 줄 수 있다.

(참고로, 글자 크기는 Size 메뉴에서도 조절이 가능하나, Header 부분을 통해 수정하는 게 좀 더 효율적인듯하다.)

지정하는 방법은 toolbar 부분에 다음과 같은 방식으로 지정해 주고

format 부분에 다음과 같이 “header”를 포함시켜주면 된다.

​

​

3. 편집화면 기본폰트 사이즈 설정

그런데 위와 같이 폰트들을 지정하고 나서, 편집화면에 들어가면, 기본적인 글자의 폰트가 다음과 같이 너무 작게 느껴질수도 있다. 특히 영어인 경우에는 그 정도가 심하다. (메뉴 툴바에 사용된 글자들보다 많이 작다)

이 때문에 Quill을 편하게 사용하려면 기본 폰트의 크기를 조절할 필요가 있는데,

이러한 기본 폰트 사이즈는 Quill설정에서 하는 것이 아니라, HTML 페이지 초반에서 다음과 같이 style 구문을 적용하면 쉽게 변경할수 가 있다.

이러한 방식으로 기본 폰트사이즈를 조절하면 다음과 같이 편집창의 기본 폰트사이즈가 아래와 같이 변화하는데, 내가 사용하기에는 14~16px정도가 무난하게 느껴졌다.

​

​

4. 글자색 및 배경색 기능 추가

– 글자의 색상과,

글자의 배경색은

다음 부분에서 사용 여부를 설정하면 된다.

​

​

​

5. 글자 스타일 (Bold, Italic, 밑줄, 취소선)

글자를 굵게 하거나, 취소선을 긋거나, 밑줄, 이태릭체의 기능은 에디터 화면에서 다음과 같이 표시되는데,

이 기능의 설정은 다음과 같이 지정하면 된다.

​

​

6. Header 지정 버튼

글자의 크기 중 H1과 H2는 미리 아이콘에 할당해 해당 아이콘을 클릭한 이후 입력하는 글자의 크기를 변경할 수 있는데, 다음과 같이 H1, H2가 이에 해당된다.

이를 사용하는 방법은 toolbox에 다음과 같이 지정해 주면 된다.

​

7. 자동 글번호 넣기

Quill에서는 글에 엔터키가 입력될 때마다, 자동으로 번호를 부여하는 자동 글 번호 넣기 기능을 지원하는데,

​

다음과 같이 숫자 형태의 번호를 부여하는 것과

다음과 같은 부호 형태의 글번호를 지원한다.

이 기능을 활성화시키는 방법은 toolbox에서 다음과 같이 list를 지정해 주고

format 부분에 이를 포함시켜주면 된다. 이 경우 숫자형 글번호는 list로 표시해 주면 된다.

​

8. Alignment

문단에서 글을 좌측, 또는 중앙이나, 우측 등에 맞추어 정렬하는 alignment 기능도 당연히 지원하는데

이 기능은 다음과 같이 toolbox 부분과, format 문에서 align 설정을 해주면 된다. 면 된다. 특별히 인자 지정은 필요하지 않다.

​

​

9. 인용부호(Blockquote) / 소스코드(Code-Block) 입력 지원

인용부호와, 프로그램용 소스코드 입력부 지원은 그 성격상 인용구라는 측면 때문에 한 번에 설정하게 되는데, Quill에서도 당연히 지원을 한다.

설정하는 방법은 다음과 같이 설정해 주면 된다.

​

10. 이미지 / 동영상 / Hyperlink

이 부분은 Quill의 기본 설치 시 대개의 경우 기본적으로 설치가 되기 때문에, 별도로 설정하지 않아도 다음과 같이 toolbox에 처음부터 아이콘이 표시되며,

toolbox 부분에 format 부분에 미리 다음과 같이 반영되어 있기는 하지만

실제로 이미지의 크기까지 조절하기 위해서는 다음과 같이 imageResize 코드를 추가해 주어야 한다.

(header에서 <script src=”https://cdn.jsdelivr.net/npm/quill-image-resize-module@3.0.0/image-resize.min.js”></script>) 코드 추가도 필요하다.)

이것이 추가되어야 다음과 같이 이미지의 크기 조절이 가능해진다.

​

한편, 하이퍼링크의 경우 이렇게 지정은 하지만 실제에 있어서 제대로 동작하지 않는 경향을 보였다 (나의 경우에는 하이퍼링크가 아닌 단순한 text로만 추가가 가능했다.)

​

​

​

Quill에서 사용되는 기본 폰트는 다음과 같이 Serif, San Serif, Monospace 3가지이다.

​

​

다만, 기존에는 다음과 같이 Qill.register 문 이전에 다음과 같은 방식으로 추가 폰트 사용을 선언하고, toolbox에 선언 내용을 포함하는 변수를 지정하는 방법이 알려져 있으나, 실제로는 위와 같이 Sans Serif만 반복되는 경향을 보였다.

이러한 현상이 나만의 문제인지 정확히 알 수는 없으나, 해외 사례들을 찾아보아도 다들 폰트 추가 문제를 해결해보려고 했으나, 성공하지 못했다는 내용만 있을 뿐 새로운 방법이나, 명확히 성공했다는 내용은 볼 수 없었다.

​

이 부분은 내가 추가로 해결할 숙제인듯하다.