CKEditor 5 single instance height

Question

I have multiple instances of CKEditor 5 and I want to add button which will change the height of texteditor. In order to do so I have to change height of a single instance, is that possible and if yes, how?

Side note: I want to make maximize button like in CKEditor 4. Is there plugin for that or I have to make it myself?

score 0 · Answer 1 · answered Jun 06 '19 at 14:53

Maximize Feature - From what I have checked it has not been implemented yet. CKEditor has a ticket ofr it: https://github.com/ckeditor/ckeditor5/issues/1235

Editor Height - This link explains How to set the height of CKEditor 5 (Classic Editor) explains how to do this permanently. If however you want to do change editor height dynamically with a button, you need to use a small trick where you assign a CSS class not directly to content area but to its container (notice .ck-small-editor .ck-content in css class and document.getElementsByClassName( 'ck-editor' )[ 0 ] in JavaScript ):

 ClassicEditor
  .create( document.querySelector( '#editor' ), {
    
  } )
  .then( editor => {
   window.editor = editor;
   
   // Assign small size to editor using CSS class in styles and button in HTML
   const editable = editor.ui.getEditableElement();
   document.getElementById( 'change-height' ).addEventListener( 'click', () => {
    document.getElementsByClassName( 'ck-editor' )[ 0 ].classList.toggle( 'ck-small-editor' );
   } );
      
  } )
  .catch( err => {
   console.error( err.stack );
  } );

.ck-small-editor .ck-content {
 min-height: 50px !important;
 height: 50px;
 overflow: scroll !important;
}

<script src="https://cdn.ckeditor.com/ckeditor5/12.0.0/classic/ckeditor.js"></script>


<div id="editor">
  <h2>The three greatest things you learn from traveling</h2>

  <p>Like all the great things on earth traveling teaches us by example. Here are some of the most precious lessons I’ve learned over the years of traveling.</p>

  <h3>Appreciation of diversity</h3>

  <p>Getting used to an entirely different culture can be challenging. While it’s also nice to learn about cultures online or from books, nothing comes close to experiencing <a href="https://en.wikipedia.org/wiki/Cultural_diversity">cultural diversity</a> in person. You learn to appreciate each and every single one of the differences while you become more culturally fluid.</p>

  <h3>Confidence</h3>

  <p>Going to a new place can be quite terrifying. While change and uncertainty makes us scared, traveling teaches us how ridiculous it is to be afraid of something before it happens. The moment you face your fear and see there was nothing to be afraid of, is the moment you discover bliss.</p>
</div>


<div>
  <button type="button" id="change-height">Change Height</button> 
</div>

CKEditor 5 single instance height

1 Answers1