Hoe de hoogte van CKEditor 5 (Classic Editor) in te stellen

In CKEditor 4 was er een configuratieoptie om de hoogte van de editor te wijzigen: config.hoogte.

Hoe verander ik de hoogte van CKEditor 5? (de klassieke editor)

Antwoord 1, autoriteit 100%

Mijn eigen vraag beantwoorden omdat het anderen kan helpen.

CKEditor 5 wordt niet langer geleverd met een configuratie-instelling om de hoogte te wijzigen.
De hoogte kan eenvoudig worden geregeld met CSS.

Er is echter één lastig ding, als je de Klassieke editor:

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

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

Dan zal de Klassieke Editor het originele element verbergen (met id editor1) en ernaast renderen. Daarom zal het wijzigen van de hoogte van #editor1via CSS niet werken.

De vereenvoudigde HTML-structuur, nadat CKEditor 5 (de klassieke editor) is weergegeven, ziet er als volgt uit:

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

In werkelijkheid is de HTML veel complexer, omdat de hele gebruikersinterface van CKEditor wordt weergegeven. Het belangrijkste element is echter het “editing area” (of “editing box”) gemarkeerd met een ck-editor__editable_inlineclass:

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

Het “bewerkingsgebied” is de witte rechthoek waar men de tekst kan invoeren. Dus om de hoogte van het bewerkingsgebied te stylen / wijzigen, volstaat het om het bewerkbare element te targeten met CSS:

<style>
.ck-editor__editable_inline {
    min-height: 400px;
}
</style>

Antwoord 2, autoriteit 19%

De hoogte instellen via een globale stylesheet.
Voeg gewoon toe aan uw algemene .css-bestand (zoals style.css):

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

Antwoord 3, autoriteit 13%

In het geval van 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()
        );
        });
    }}
/>

Antwoord 4, autoriteit 9%

editor.ui.view.editable.editableElement.style.height = '300px';

Antwoord 5, autoriteit 6%

Voeg dit toe aan je stylesheet:

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

Antwoord 6, autoriteit 5%

Als u dit programmatisch wilt doen, kunt u dit het beste doen door een plug-in te gebruiken. Je kunt het eenvoudig als volgt doen. Het volgende werkt met CKEditor 5 versie 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 );
    });

Of als u dit aan een aangepaste build wilt toevoegen, kunt u de volgende plug-in gebruiken.

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

Dit voegt een nieuwe configuratie toe aan de CKEditor genaamd “minHeight” die de minimale hoogte van de editor instelt die op deze manier kan worden gebruikt.

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

Antwoord 7, autoriteit 5%

Vanaf CKEditor 5 versie 22 werken de voorgestelde programmatische oplossingen niet. Hier is hoe ik het werk gedaan krijg:

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>

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

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

<style>
.ck.ck-editor {
    max-width: 500px;
}
</style>

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

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

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

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

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

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

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>

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

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

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

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