웹 페이로의 문장 입력
파이어베이스에 자료를 등록하기 위해 웹에서 문자열을 입력하는 가장 기본적이고 쉬운 방법은 아마도 <input></input> 구문이나, <textarea> </textarea> HTML 문법을 이용하는 것이라고 생각된다. 특히, 짧은 문자열이 아니라,. 제법 길이가 있는 문단의 내용을 입력하려면, 다음과 같은 <textarea> </textarea> HTML 문법 사용은 필수적이라 할 수 있다.
<textarea class=“form-control mt-4 mb-5” id=“content” rows=“8” cols=“50”>내용</textarea>
이 간단한 코드로, 다음과 같이 여러 줄에 걸친 문자열 입력창(아래 화면중 내용 부분)을 만들어 문장 정보를 입력받을 수 있다.
그런데, 이러한 textarea 문법은 사용이 매우 간단한 장점이 있기는 하지만, 그림이나 동영상 같은 자료를 문장의 중간에 넣을 수 없다는 한계가 있다. 이 때문에, 사진이나 동영상이 첨부된 블로그 편집 페이지를 만들거나 하는 경우에 <textarea> 구문으로는 문제를 해결할 수 없게 되고, 자연스럽게 textarea 구문의 기능을 넘어서는 대안에 대한 관심이 생겨나게 된다..
WYSWYG 에디터
그런데, 이러한 고민들을 이전에도 많은 사람들이 해 왔던 덕택에, 매우 다행스럽게도 이미 해결책들이 나와 있다. 바로 웹페이지용 WYSYIG 에디터를 선택해 라이브러리 형태로 추가하면, 위의 textarea 구문에서는 불가능했던 그림이나 동영상을 문서 중간에 포함시킨 형태로 데이터로 입력하는 것이 가능해진다.
또한 이렇게 작성해서 파이어베이스에 데이터를 저장한 이후에는, 다시 다음과 같이 문자와 이미지, 동영상이 혼재된 문서를 편집했던 그대로 불러와 웹페이지의 형태로 표시할 수도 있다.
WYSWYG 에디터 – Quill
이러한 WYSWYG 에디터들로는 자료를 찾아보니, 대략 다음과 같은 에디터들이 유명한 것 같다.
CKEditor – 기능이 비교적 많다고 하는 에디터로 인기가 높은 편이라고 한다.
Quill – 매우 간단한 기능의 가벼운 에디터
Draft.js – Facebook에서 개발한 에디터로, React와 잘 맞는다고 한다.
냐는 이중에서 Quill 에디터( https://quilljs.com/) 1.3.7을 사용했다. Quill은 CKEditor보다 많이 알려져 있지는 않은듯 했으나, 쉽고 외국에서는 나름 꽤 인기가 있다는 글 때문이었다.
Quill의 기본적인 인터페이스는 다음화면과 같이 단순하고,
Toolbox 구성은 다음과 같이 기본적인 기능들은 모두 표시되어 있는 상태였다.
실제로 사용해보니 다음과 같은 장점들이 눈에 띄었다.
– 기본 설치상태에서 기본적으로 3가지 폰트 선택이 가능했고,
– 3-4단계의 글자 크기 선택이 가능했고,
– 이와 별개로 문단에서도 다시 3단계 정도 크기 조절도 지원했다.
– 글자의 색상을 쉽게 바꿀수도 있었고
배경색을 쉽게 바꿀수도 있었다
– 또한 글자에 다음과 같이 속성을 주는 것도 가능했다
– 문단에 있어서도, 문장앞에 번호 넣기 기능을 지원했고, 문단의 좌우 문단맞추기 기능을 지원했다.
– 또한 이미지와 동영상 및 PDF파일을 문서의 일부로 추가가 가능했고,
또한 이미지의 사이즈 조절 및 위치 조절도 가능했고, 조절도 쉬었다.
더불어 해당 이미지를 해당 줄에서 왼쪽 또는 오른쪽 또는 중앙부에 배치하는 옵션도 사용이 가능했다.
그렇지만 아쉬운 단점들도 있었다.
– 각각의 아이콘을 선택할때마다, 해당 아이콘의 기능에 대한 간단한 설명이 없어 다소 불편했고,
– 기본설치상태에서 표넣기 기능이 지원되지 않았다.
– 하이퍼링크나, 수식편집기 같은 것은 아이콘은 표시되어 있었으나, 나의 경우에는 동작하지 않았다.
– 또한 , 기본지원되는 3가지 폰트에 추가 폰트를 설정할 수 있다고 하나, 막상해보니 잘 되지 않았다.
– 그리고 안정화 버전인 1.3.7 에서는 문제가 없으나, 최신 버전인 2.0Beta에서는 이미지 사이즈 조절이 원활하지 않은 문제가 잇었다.
이처럼 나름 장점이 많은 Quill사용에 있어 한가지 염려스러운 점이 있었다.
동작상 문제가 없었으나, 콘솔메시지를 함께 보면 다음과 같은 경고 메시지가 발생하고 있었다.
이리저리 찾아보니 이런 문제가 꽤 오래 알려져 있었다고 하는데 아직 해결되지 않은듯 했다. 이런 경고메시지를 어떻게 해결해야 할지, 아니면 그냥 무시하고 사용해도 될지에 대한 생각때문에 조금 염려스러운 감이 들기는 했다.
설치방법은..
내가 Quill을 사용한 실제 방법은 다음과 같이 라이브러리를 추가해 주고
다음과 같은 방식으로 초기화 시켜 사용했다.
이렇게 Quill을 사용하여 작성한 아주 간단한 블로그 페이지의 코드를 첨부해 두었으므로, 실제 Quill사용 사례를 살펴볼수 있을듯 하다. (실제로는 이렇게 만든 코드를 작성, 편집, 열람 등의 세부 기능별로 다시 나누었다.)
WYSWYG 에디터 – CKEditor
위에 언급한 다른 에디터들중 C
이러한 부분은 확장 플러그인으로 해결이 가능하다고는 하나, 복잡한 듯 했고, CKEditor는 추가 기능들중 많은 부분을 유료로 판매하고 있어서, 최근 버전으로 개선되면서 기능은 많아졌지만 사용은 좀 더 복잡해진 느낌이 들었다.