Question

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

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

Answer 1

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

CKEditor 5不再提供配置设置来更改其高度。使用CSS可以轻松控制高度。

，有一件棘手的事情

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

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

然后经典编辑器将隐藏原始元素（标识为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>

Answer 2

import React, {Component} from 'react';
import { DropTarget } from 'react-dnd';


function collect(connect, monitor) {
    return {
        connectDropTarget: connect.dropTarget,
        isOver: monitor.isOver,
        item: monitor.getItem,

    }
}

class DropCells extends Component {
    state = {
        tdValue: ""
    };
    render() {
        const { connectDropTarget, isOver, item} = this.props;
        const backgroundColor = isOver ? 'lightgreen' : 'white';
        const dropped = isOver?  this.setState({tdValue: this.props.item}): this.state.tdValue;
        return connectDropTarget(
            <td className="target" style={{ background: backgroundColor }}>
                 {dropped}
            </td>
        );
    }
}

export default DropTarget('item', {}, collect)(DropCells);

Answer 3

对于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()
              );
            });
          }}
      />

Answer 4

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

Answer 5

使用CSS：

.ck.ck-editor__main .ck-content {
    height: 239px;
}

Answer 6

只需将其添加到style标记中即可。

<style>
 .ck-editor__editable
 {
    min-height: 150px !important;
    max-height: 400px !important;
 }
</style>

Answer 7

我试图在配置中设置高度和宽度，但是在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());
        });
    });
}

Answer 8

将这个 CSS 放入您的全局 CSS 文件，奇迹就会发生。 CkEditor 充满了未解之谜。

.ck-editor__editable_inline {
    min-height: 400px;
}

Answer 9

如果您希望通过编程方式执行此操作，则最好的方法是使用插件。您可以按照以下步骤轻松进行操作。以下适用于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 );
    } );

Answer 10

Setting the height via a global stylesheet. 只需添加到常见的.css文件（如style.css）：

.ck-editor__editable {
    min-height: 500px;
}

Answer 11

如果使用jQuery，并且必须将CKEditor 5应用于文本区域，则存在“快速而肮脏”的解决方案。

条件：

<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
});

这对我来说很好

Answer 12

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>

click to show image here

Answer 13

同时使用max-height和min-height。因为max-height在达到最大提及高度后才提供滚动条选项。 min-height为<textarea>赋予静态高度。

.ck-editor__editable { 最大高度：400像素； min-height：400px;}

Answer 14

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

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()
   )
})

Answer 15

此CSS方法对我有用：

.ck-editor__editable {
    min-height: 400px;
}

Answer 16

只需将其添加到CSS文件中

.ck-editor__editable {min-height: 150px;}

Answer 17

将其添加到样式表：

      .ck-editor__editable 
       {
        min-height: 200px !important;
            }

Answer 18

关于配置CKEditor 5的宽度：

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

要设置编辑器的宽度（包括工具栏和编辑区域），就足以设置编辑器主容器的宽度（使用const { WebhookClient } = require('dialogflow-fulfillment'); server.post('/', function (request, response, next) { const agent = new WebhookClient({ request, response }); const welcome = () => { agent.add('Hello Welcome To My bot'); } let intentMap = new Map(); intentMap.set('Default Welcome Intent', welcome); agent.handleRequest(intentMap); }类）：

.ck-editor

Answer 19

只需测试一下即可。希望能帮到您

var editor_ = CKEDITOR.replace（'content'，{height：250}）;

Answer 20

我只是在我的布局页面中添加了这个问题

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

希望我能帮助某人 :D

如何设置CKEditor 5的高度（经典编辑器）

20 个答案: