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> |
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]
'Programming > vue.js' 카테고리의 다른 글
| vue import "@" (0) | 2024.04.19 |
|---|---|
| vue webpack ckeditor (0) | 2024.04.19 |
| vue 입력창 포커스 설정 (0) | 2024.03.28 |
| vue proxy (0) | 2024.03.26 |
| vue.js i18n (0) | 2024.02.19 |
