vue3 ckeditor5 document editor 추가하기

classic editor는 이미지 크기를 조절할 수 없어서 설정 가능한 에디터를 찾아봤더니 document editor라는 녀석이 필요하다고 한다.

그런데 얘는 희한하게(?) 툴바가 안나오는데, 별도의 위치에서 붙여줘야 하는 녀석인 듯.

<template>     <div class="document-editor__toolbar"></div>     <div class="document-editor__editable-container">         <ckeditor :editor="editor" :config="editorConfig"  @ready="onReady"></ckeditor>     </div> </template> // ... methods: {       onReady(editor) {           const toolbarContainer = document.querySelector(  '.document-editor__toolbar' );           toolbarContainer.appendChild( editor.ui.view.toolbar.element );       } }

[링크 : https://github.com/ckeditor/ckeditor5-vue/issues/120]

 

읽기 전용 모드로 바꾸려고 하니

readonly와 disabled가 있는데 

<template>     <vx-card :title="editorName" v-if="loaded">         <ckeditor :editor="editor" v-model="editorData" :config="editorConfig" :readonly="editorDisabled" :disabled="editorDisabled" ></ckeditor>     </vx-card> </template>

[링크 : https://stackoverflow.com/questions/63344958/inline-editor-disable-editor-and-display-html-render-content-vue]

 

readonly는 readonly property라 상태보는 용도로만 사용해야 하고

[링크 : https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#property-readOnly]

 

setReadOnly() 함수를 이용해 상태를 변경해야 한다.

[링크 : https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-setReadOnly]

 

상태에 따라 toolbar의 표시를 on/off 해주는 방법도 좋을 듯.

ClassicEditor     .create( document.querySelector( '#editor' ), {         // The editor's configuration.         // ...     } )     .then( editor => {         const toolbarElement = editor.ui.view.toolbar.element;         editor.on( 'change:isReadOnly', ( evt, propertyName, isReadOnly ) => {             if ( isReadOnly ) {                 toolbarElement.style.display = 'none';             } else {                 toolbarElement.style.display = 'flex';             }         } );     } )     .catch( error => {         console.log( error );     } );

[링크 : https://ckeditor.com/docs/ckeditor5/latest/features/read-only.html]