Jak ustawić wysokość CKEditor 5 (Classic Editor)

Question

W CKEditor 4, aby zmienić wysokość edytora, dostępna była opcja konfiguracji: config.height.

Jak zmienić wysokość CKEditor 5? (edytor klasyczny)

Answer 1

Odpowiadając na moje własne pytanie, ponieważ mogłoby to pomóc innym.

CKEditor 5 nie jest już dostarczany z ustawieniem konfiguracyjnym do zmiany jego wysokości. Wysokość można łatwo kontrolować za pomocą CSS.

Jest jedna kłopotliwe rzeczą, jeśli używasz klasyczny edytor:

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

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

Wtedy Edytor Klasyczny ukryje oryginalnego elementu (o identyfikatorze editor1) i renderowanie obok niego. Dlatego zmiana wysokości #editor1 za pośrednictwem CSS nie będzie działać.

Uproszczona struktura HTML, po CKEditor 5 (Editor Classic) sprawia, wygląda następująco:

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

W rzeczywistości HTML jest znacznie bardziej skomplikowana, ponieważ cała CKEditor UI jest renderowane. Jednak najważniejszym elementem jest „obszar edycji” (lub „pole edycji”) oznaczony klasą ck-editor__editable:

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

„Obszar edycji” jest biały prostokąt, gdzie można wprowadzić tekst. Aby zmienić styl/wysokość obszaru edycji, wystarczy skierować na edytowalny element za pomocą CSS:

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