Quasar q-dialog 안에서 ckeditor5 기능이 안되는 현상

어찌저찌 에디터를 넣었더니 왜 모달에서는 툴바들이 작동을 안하는거냐...

전 글에서 textarea 대신에 에디터 기능이 있는 텍스트필드가 필요하다고 해서 CKEditor5로 구현
⚠️ 하지만 vue quasar 프레임워크의 q-dialog인 모달 안에서의 CKEditor5는 정상적으로 작동하지 않았다
(테이블 생성 툴바나 링크 툴바가 보이지 않거나 클릭하면 툴바가 사라지는 현상)

원인 : quasar 모달도 그렇고 ckeditor의 기능별 툴바들도 root div안에 생성되는 것이 아니라 형제 요소로 생성되고 있었다.

(개인적인 견해 : 툴바들의 위치가 그 때마다 계산되어져 생성되기 때문인듯)

과정

• 툴바(테이블 생성 후 수정할 때의 툴바처럼..)들은 개발자도구에서 요소탭에서 선택을 할 수가 없다.
• 뭔가 모달 뒤에 생성되고 있을 것 같아 모달의 opacity를 줄이니 뒤에 뜨는 것을 확인.
• 문서를 보면 CSS 프레임워크와의 사용법에 대해 나와있었지만 bootstrap에 관해서만 가이드가 있었고 autofocus가 원인이라는 내용이 적혀있었다.
• quasar의 q-dialog에 auto-focus를 끄고 외부의 focus를 허용하는 옵션을 줘도 해결되지 않았다.
• 그냥 원초적으로(?) 에디터의 툴바가 생성되었을 때 형제 요소로 생성되는 툴바를 quasar 모달 요소안으로 위치를 옮겨보자라는 생각에서 시작.

<q-dialog persistent @show="onShowModal">
	...
	<ck-editor
	  v-model="editorContent"
	  :editor="editor"
	  :config="editorConfig"
	/>
	...
</q-dialog>

// ✅ q-dialog가 생성되어져서 보여질 때 실행되는 함수
onShowModal() {
  const 사라지는툴바 = document.querySelector('.ck-body-wrapper')
  const 퀘이사모달 = document.querySelector('.q-card')
  if(퀘이사모달) 퀘이사모달.appendChild(사라지는툴바)
},

Quasar 깃허브와 CKEditor5의 깃허브에 질문을 해봐도 정확한 답을 얻지 못했지만 정말 간단한 방법으로 해결했다.