[Quasar] 퀘이사 에디터(editor)에 이미지 파일 넣기 WYSIWYG

퀘이사 프레임워크에서 제공하는 컴포넌트에는 에디터도 있다. WYSIWYG Editor (“what you see is what you get”). 말 그대로 유저가 입력하는 내용 그대로 html화 시켜서 저장하고 출력할 수 있도록 한다.

 

https://quasar.dev/vue-components/editor#examples

Editor (WYSIWYG) | Quasar Framework

 

퀘이사 에디터에는 이미지 파일을 넣는 기능은 제공하지 않기에 이를 커스텀해서 써야한다. 

 

우선 퀘이사 에디터 컴포넌트를 선언해주고 그 안에 속성 값으로 definitions 와 toolbar를 넣어준다.

definitions에 추가할 커스텀 기능을 넣어주고 toobar에 에디터툴바에 보여줄 툴 옵션 들을 나열시킨다.

 

<templete> 안

아래 data 필드에 difinitions를 선언해주고, 그안에 커스컴 기능을 넣어준다. 

tip은 해당 툴 위에 호버했을 때 나오는 팝오버이고, handler에 해당 커스텀 툴을 눌렀을 때 실행하는 함수를 선언한다.

 

이미지를 넣는 방식은, 가상의 파일 인풋을 만들고, 그 파일 인풋을 클릭하여 받는 파일 정보를 base64코드화 하여 editor의 문자열에 삽입하는 것이다. 

 

<script> 안

 

예시 코드를 codepen에 작성해서 링크 걸어 놓았다. 현재 올린 이미지 파일 중 대표 이미지를 선택하여 메인파일(썸네일)로 만들 수 있는지 고민해보고 있다.

 

https://codepen.io/hobbada/pen/LYWNjEd

Editor (WYSIWYG): Default editor - Quasar Playground