example - ckeditor install

Cómo establecer la altura de CKEditor 5(Editor clásico)

Question

En CKEditor 4 para cambiar la altura del editor había una opción de configuración: config.height .

¿Cómo cambio la altura de CKEditor 5? (El editor clásico)

Answer 1

Añádelo a la hoja de estilo:

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

Answer 2

En cuanto a la configuración del ancho del CKEditor 5:

CKEditor 5 ya no viene con una configuración para cambiar su ancho, pero su ancho se puede controlar fácilmente con CSS.

Para establecer el ancho del editor (incluyendo la barra de herramientas y el área de edición) es suficiente establecer el ancho del contenedor principal del editor (con la clase .ck-editor ):

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

Answer 3

Respondiendo a mi propia pregunta, ya que podría ayudar a otros.

CKEditor 5 ya no viene con un ajuste de configuración para cambiar su altura. La altura se puede controlar fácilmente con CSS.

Sin embargo, hay una cosa difícil, si usas el Editor clásico :

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

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

Luego, el Editor clásico ocultará el elemento original (con el editor1 ) y se renderizará junto a él. Es por eso que cambiar la altura de #editor1 través de CSS no funcionará.

La estructura HTML simplificada, después de que se muestre CKEditor 5 (el Editor clásico), tiene el siguiente aspecto:

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

En realidad, el HTML es mucho más complejo, porque se representa toda la interfaz de usuario de CKEditor. Sin embargo, el elemento más importante es el "área de edición" (o "cuadro de edición") marcado con una clase ck-editor__editable :

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

El "área de edición" es el rectángulo blanco donde se puede ingresar el texto. Entonces, para diseñar / cambiar la altura del área de edición, es suficiente apuntar al elemento editable con CSS:

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

Answer 4

Configuración de la altura a través de una hoja de estilo global. Solo agréguelo a su archivo .css común (como style.css):

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

Answer 5

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