在 Vue.js 中设置 CKEditor 高度

Question

我在 Vue.js 中尝试 ckeditor5，我遇到了无法手动设置高度的问题，下面是我的代码，如果我正在做任何事情请告诉我错了。

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

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

Answer 1

经典编辑器（CKEditor 5）不再将编辑区域封装在一个中，这意味着可以使用 CSS 轻松控制编辑区域的高度（和类似选项）。例如，可以通过以下方式实现高度设置：

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

或

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

2020 注意： 在使用单页 Vue 组件时，不要限定要添加到 ckeditor 的 CSS，因为它的元素与 Vue 分开呈现并且没有向它们添加数据属性。换句话说，不要这样做，因为它不会起作用：

<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>

在 Vue.js 中设置 CKEditor 高度

Set CKEditor height in Vue.js

css

ckeditor

vue.js

vue-component

vuejs2