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

标签 css vue.js vuejs2 ckeditor vue-component

<分区>

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

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

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

最佳答案

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

关于css - 在 Vue.js 中设置 CKEditor 高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53935399/

相关文章:

javascript - 从子组件调用父方法(Vue.js)

javascript - 替换嵌套数组中的对象

vue.js - 如果在 vue 中使用数组作为模型,如何获取复选框的选中值

javascript - 构建 Vue.js 项目时使用 Gridsome 时出现 TypeError

css - 带滚动的动态高度 DIV

css - 使用 .css 文件不显示图像

javascript - 使用 openlayers map Bootstrap 列高度为 100 的内容

javascript - 从 Vue 的渲染函数中控制子节点

javascript - 左边的花式框文字

javascript - 组件数据函数返回的 Vue 2 数据未定义