programing

Vue.js에서 CKEditor 높이를 설정합니다.

prostudy 2022. 6. 21. 22:29
반응형

Vue.js에서 CKEditor 높이를 설정합니다.

시험삼아 해봤는데ckeditor5Vue.js에서 높이를 수동으로 설정할 수 없는 문제가 발생했습니다.다음은 제 코드입니다.잘못하고 있는 것이 있으면 알려주세요.

<ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>

data() {
        return {
            editor: Editor,
            editorData: '',
            editorConfig: {
                height: '500px'
            }
        }

Classic Editor(CKEditor 5)는 편집 영역을 에 캡슐화하지 않기 때문에 편집 영역의 높이(및 이와 유사한 옵션)를 CSS로 쉽게 제어할 수 있습니다.예를 들어 다음과 같이 높이를 설정할 수 있습니다.

<style>
  .ck-editor__editable {
    min-height: 500px;
   }
</style>

또는

.ck-content { height:500px; }.

2020년 주의: 1페이지 Vue 컴포넌트를 사용하는 경우 CCS는 Vue와 별도로 렌더링되며 데이터 속성은 추가되지 않으므로 ckeditor에 추가할 CSS의 범위를 지정하지 마십시오.즉, 동작하지 않기 때문에, 이것을 실시하지 말아 주세요.

<style scoped> /* don't add "scoped"; note that this will also globalize the CSS for all editors in your project */
    .ck-editor__editable {
        min-height: 5000px;
    }
</style>

언급URL : https://stackoverflow.com/questions/53935399/set-ckeditor-height-in-vue-js

반응형