How to set the height of CKEditor 5 (Classic Editor)

后端未结

关注

 17  1305

清歌不尽

In CKEditor 4 to change the editor height there was a configuration option: config.height.

How do I change the height of CKEditor 5? (the Classic Editor)

相关标签:

17条回答

情话喂你

2020-12-01 09:24

Use max-height and min-height both. Beacuse max-height give scroll bar option after reached maximum mention height. Where min-height give static height to <textarea>.

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

0 讨论(0)
发布评论:

提交评论
- 加载中...

一生所求

2020-12-01 09:25

If you wish to do this programatically, the best way to do it is to use a Plugin. You can easily do it as follows. The following works with CKEditor 5 version 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 );
    });

Or if you wish to add this to a custom build, you can use the following plugin.

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

This adds a new configuration to the CKEditor called "minHeight" that will set the editor minimum height which can be used like this.

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

0 讨论(0)

逝去的感伤

2020-12-01 09:25
As for configuring the width of the CKEditor 5:

CKEditor 5 no longer comes with a configuration setting to change its width but its width can be easily controlled with CSS.

To set width of the editor (including toolbar and editing area) it is enough to set width of the main container of the editor (with .ck-editor class):
```
<style>
.ck.ck-editor {
    max-width: 500px;
}
</style>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

名媛妹妹

2020-12-01 09:26

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

0 讨论(0)

醉话见心

2020-12-01 09:27
Answering my own question as it might help others.

CKEditor 5 no longer comes with a configuration setting to change its height. The height can be easily controlled with CSS.

There is one tricky thing though, if you use the Classic Editor:
```
<div id="editor1"></div>
```
```
ClassicEditor
    .create( document.querySelector( '#editor1' ) )
    .then( editor => {
        // console.log( editor );
    } )
    .catch( error => {
        console.error( error );
    } );
```
Then the Classic Editor will hide the original element (with id editor1) and render next to it. That's why changing height of #editor1 via CSS will not work.

The simplified HTML structure, after CKEditor 5 (the Classic Editor) renders, looks as follows:
```

<div id="editor1" style="display:none"></div> 
<div class="ck-reset ck-editor..." ...>
    <div ...>
        
        <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>
```
In reality the HTML is much more complex, because the whole CKEditor UI is rendered. However the most important element is the "editing area" (or "editing box") marked with a ck-editor__editable_inline class:
```
<div class="... ck-editor__editable ck-editor__editable_inline ..."> ... </div>
```
The "editing area" is the white rectangle where one can enter the text. So to style / change the height of the editing area, it is enough to target the editable element with CSS:
```
<style>
.ck-editor__editable_inline {
    min-height: 400px;
}
</style>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
予麋鹿

2020-12-01 09:34
Setting the height via a global stylesheet. Just add to your common .css file (like style.css):
```
.ck-editor__editable {
    min-height: 500px;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...