78

在 CKEditor 4 中更改编辑器高度有一个配置选项：config.height。

如何更改 CKEditor 5 的高度？（经典编辑器）

4

24 回答 24

151

回答我自己的问题，因为它可能会帮助其他人。

CKEditor 5 不再附带更改其高度的配置设置。高度可以通过 CSS 轻松控制。

但是，如果您使用Classic Editor，有一件棘手的事情：

<div id="editor1"></div>

ClassicEditor
    .create( document.querySelector( '#editor1' ) )
    .then( editor => {
        // console.log( editor );
    } )
    .catch( error => {
        console.error( error );
    } );

然后经典编辑器将隐藏原始元素（带有 id editor1）并在其旁边渲染。这就是为什么通过 CSS 更改高度#editor1不起作用的原因。

CKEditor 5（经典编辑器）渲染后的简化 HTML 结构如下所示：

<!-- This one gets hidden -->
<div id="editor1" style="display:none"></div> 
<div class="ck-reset ck-editor..." ...>
    <div ...>
        <!-- This is the editable element -->
        <div class="ck-blurred ck-editor__editable ck-rounded-corners ck-editor__editable_inline" role="textbox" aria-label="Rich Text Editor, main" contenteditable="true">
            ...
        </div>
    </div>
</div>

实际上 HTML 要复杂得多，因为整个 CKEditor UI 都被渲染了。然而，最重要的元素是标有ck-editor__editable_inline类的“编辑区”（或“编辑框”）：

<div class="... ck-editor__editable ck-editor__editable_inline ..."> ... </div>

“编辑区域”是可以输入文本的白色矩形。因此，要设置样式/更改编辑区域的高度，使用 CSS 定位可编辑元素就足够了：

<style>
.ck-editor__editable_inline {
    min-height: 400px;
}
</style>
于 2017-10-04T07:31:31.957 回答
33

通过全局样式表设置高度。 只需添加到您的通用 .css 文件（如 style.css）：

.ck-editor__editable {
    min-height: 500px;
}
于 2018-12-16T17:55:03.050 回答
20

在ReactJS的情况下。

<CKEditor
    editor={ClassicEditor}
    data="<p>Hello from CKEditor 5!</p>"
    onInit={(editor) => {
        // You can store the "editor" and use when it is needed.
        // console.log("Editor is ready to use!", editor);
        editor.editing.view.change((writer) => {
        writer.setStyle(
            "height",
            "200px",
            editor.editing.view.document.getRoot()
        );
        });
    }}
/>
于 2020-07-03T07:24:06.990 回答
14 
editor.ui.view.editable.editableElement.style.height = '300px';
于 2018-09-17T20:20:00.793 回答
9

将此添加到您的样式表中：

.ck-editor__editable {
    min-height: 200px !important;
}
于 2018-11-08T10:42:16.480 回答
8

如果您希望以编程方式执行此操作，最好的方法是使用插件。您可以按如下方式轻松完成。以下适用于 CKEditor 5 版本 12.x

function MinHeightPlugin(editor) {
  this.editor = editor;
}

MinHeightPlugin.prototype.init = function() {
  this.editor.ui.view.editable.extendTemplate({
    attributes: {
      style: {
        minHeight: '300px'
      }
    }
  });
};

ClassicEditor.builtinPlugins.push(MinHeightPlugin);
ClassicEditor
    .create( document.querySelector( '#editor1' ) )
    .then( editor => {
      // console.log( editor );
    })
    .catch( error => {
      console.error( error );
    });

或者，如果您希望将其添加到自定义构建中，您可以使用以下插件。

class MinHeightPlugin extends Plugin {
    init() {
        const minHeight = this.editor.config.get('minHeight');
        if (minHeight) {
            this.editor.ui.view.editable.extendTemplate({
                attributes: {
                    style: {
                        minHeight: minHeight
                    }
                }
            });
        }
    }
}

这为 CKEditor 添加了一个名为“minHeight”的新配置，它将设置编辑器的最小高度，可以像这样使用。

ClassicEditor
    .create(document.querySelector( '#editor1' ), {
      minHeight: '300px'
    })
    .then( editor => {
        // console.log( editor );
    } )
    .catch( error => {
        console.error( error );
    } );
于 2019-06-11T19:06:03.560 回答
8

从 CKEditor 5 版本 22 开始，建议的编程解决方案不起作用。这是我完成工作的方式：

ClassicEditor.create( document.querySelector( '#editor' ) )
    .then( editor => {
        editor.ui.view.editable.element.style.height = '500px';
    } )
    .catch( error => {
        console.error( error );
    } );
.ck-editor__editable {min-height: 500px;}
<div>
  <textarea id="editor">Hi world!</textarea>
</div>
<script src="https://cdn.ckeditor.com/ckeditor5/22.0.0/classic/ckeditor.js"></script>

于 2020-09-24T08:05:19.003 回答
5

我试图在配置上设置高度和宽度，但它在classic Editor. 通过这样做，我能够以编程方式在 Vue上更改编辑器的高度。

mounted() {
    const root = document.querySelector('#customer_notes');

    ClassicEditor.create(root, config).then(editor=>{
        // After mounting the application change the height
        editor.editing.view.change(writer=>{
            writer.setStyle('height', '400px', editor.editing.view.document.getRoot());
        });
    });
}
于 2020-05-03T17:11:27.177 回答
4

使用 css：

.ck.ck-editor__main .ck-content {
    height: 239px;
}
于 2021-05-29T10:32:13.043 回答
2

只需将其添加到style标签中。

<style>
 .ck-editor__editable
 {
    min-height: 150px !important;
    max-height: 400px !important;
 }
</style>
于 2020-02-29T09:25:42.260 回答
2

至于配置CKEditor 5的宽度：

CKEditor 5 不再附带更改其宽度的配置设置，但可以使用 CSS 轻松控制其宽度。

要设置编辑器的宽度（包括工具栏和编辑区域），只需设置编辑器主容器的宽度（带.ck-editor类）：

<style>
.ck.ck-editor {
    max-width: 500px;
}
</style>
于 2018-08-10T08:11:03.233 回答
2

把这个CSS放在你的全局 CSS 文件中，奇迹就会发生。CkEditor充满了未解之谜。

.ck-editor__editable_inline {
    min-height: 400px;
}
于 2021-02-25T10:33:06.400 回答
1

将此添加到您的全局样式表中，这将增加 CKEditor 的大小:)

.ck-editor__editable_inline {
    min-height: 500px;
 }
于 2021-08-16T14:09:28.763 回答
1

使用max-height和min-height两者。因为max-height达到最大提及高度后提供滚动条选项。在哪里min-height给静态高度<textarea>。

.ck-editor__editable { 最大高度：400px; 最小高度：400px;}

于 2020-07-18T17:27:14.110 回答
1

只需将其添加到您的 CSS 文件中

.ck-editor__editable {min-height: 150px;}
于 2020-11-17T08:31:09.607 回答
0

这个 CSS 方法对我有用：

.ck-editor__editable {
    min-height: 400px;
}
于 2020-10-21T13:46:20.300 回答
0

就我而言，它对我有用添加一个 ck 类并编写如下样式：

<style>
    .ck {
        height: 200px;
    }

</style>
于 2021-12-02T00:28:28.643 回答
0

对于这个特定版本https://cdn.ckeditor.com/4.16.0/standard/ckeditor.js，下面的代码块对我有用。 .cke_contents { height: 500px !important; } 我想不同之处在于它是复数形式。

于 2021-08-30T18:00:22.383 回答
0

基于@Jaskaran Singh React 解决方案。我还需要确保它的父级高度为 100%。我通过分配一个ref名为“modalComponent”并进一步添加以下代码来实现这一点：

editor.editing.view.change(writer => {

   let reactRefComponentHeight = this.modalComponent.current.offsetHeight
   let editorToolbarHeight = editor.ui.view.toolbar.element.offsetHeight
   let gapForgiveness = 5
   let maximizingHeight = reactRefComponentHeight - editorToolbarHeight - gapForgiveness

   writer.setStyle(
      'height',
      `${maximizingHeight}px`,
      editor.editing.view.document.getRoot()
   )
})
于 2020-08-17T10:31:43.380 回答
0

如果您使用 jQuery 并且 CKEditor 5 必须应用于 textarea，则有一个“快速而肮脏”的解决方案。

条件：

<textarea name='my-area' id='my_textarea_id'>

如果您使用 jQuery，编辑器调用可能是：

var $ref=$('#my_textarea_id');

ClassicEditor
    .create( $ref[0] ,{
        // your options
    } )
    .then( editor => {
        // Set custom height via jQuery by appending a scoped style
        $('<style type="text/css" scoped>.ck-editor .ck-editor__editable_inline {min-height: 200px !important;}</style>').insertAfter($ref);

    } )
    .catch( error => {
        console.error( error );
    } );

换句话说，在渲染之后，您可以处理用于构建编辑器的相同元素，并在包含自定义高度的作用域样式标记之后追加。

$('<style type="text/css" scoped>.ck-editor .ck-editor__editable_inline {min-height: 200px !important;}</style>').insertAfter($ref);

如果你喜欢使用一个函数（或一些类方法）来做到这一点，你需要这样的东西：

var editorBuildTo = function(id,options){
  var options=options || {};
  //Height represents the full widget height including toolbar
  var h = options.height || 250; //Default height if not set
  var $ref = $('#'+id);
  
  h=(h>40?h-40:h);//Fix the editor height if the toolbar is simple

  ClassicEditor
    .create( $ref[0] ,{
        // your options
    } )
    .then( editor => {
        // Set custom height via jQuery
        $('<style type="text/css" scoped>.ck-editor .ck-editor__editable_inline {min-height: '+h+'px !important;}</style>').insertAfter($ref);
    } )
    .catch( error => {
        console.error( error );
    } );
}

editorBuildTo('my_textarea_id',{
  height:175,
  // other options as you need
});

这对我很有效

于 2020-04-02T09:29:42.100 回答
0 
1.resource/assets/js/app.js
=================================
2.paste this code 
=================================

 require('./bootstrap');
//integrate
window.ClassicEditor = require('@ckeditor/ckeditor5-build-classic');



============================================
3.write on terminal
============================================
npm install --save @ckeditor/ckeditor5-build-classic
npm run watch

=======================================
4.in blade file
=======================================
<!DOCTYPE html>
<html lang="en">
  <title></title>

  <body>

    <form action="{{route('admin.category.store')}}" method="post" accept-charset="utf-8">
    @csrf
      <div class="form-group row">
    <div class="col-sm-12">
        <label  class="form-control-label">Description:</label>
        <textarea name="description" id="editor" class="form-control" row="10" cols="80"></textarea>
    </div>
  </div>
   </form>
<script>
$(function () {
  ClassicEditor
.create( document.querySelector( '#editor' ), {
    toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
    heading: {
        options: [
            { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
            { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
            { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
        ]
    }
} )
.catch( error => {
    console.log( error );
} );
})

</script>


  </body>
</html>

点击此处显示图片

于 2020-05-02T06:06:01.333 回答
0

如果它在最新版本的 Angular 中说 12 或 12+。我们可以将以下样式添加到您的组件样式文件中。

:host ::ng-deep .ck-editor__editable_inline { min-height: 300px; }

于 2022-02-08T19:06:36.543 回答
-1

只是测试它的工作。希望能帮到你

var editor_ = CKEDITOR.replace('content', {height: 250});

于 2020-03-10T08:13:24.087 回答
-1

我解决了这个问题，只需在我的布局页面中添加

<style>
       .ck-content{
           height: 250px;
       }
</style>

希望我能帮助别人：D

于 2021-05-17T17:02:59.010 回答