时间戳

首页 > 解决方案 > 在 Vue.js 中设置 CKEditor 高度

css - 在 Vue.js 中设置 CKEditor 高度

问题描述

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

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

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

标签： cssvue.jsvuejs2ckeditorvue-component

解决方案

经典编辑器（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>

推荐阅读