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]
