Как установить высоту CKEditor 5 (классический редактор)

Ответ 1

Отвечая на мой вопрос, так как это может помочь другим.

CKEditor 5 больше не поставляется с настройкой конфигурации для изменения его высоты. Высота легко контролируется с помощью CSS.

Есть одна хитрость, если вы используете классический редактор:

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

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

Затем классический редактор скрывает оригинальный элемент (с идентификатором editor1) и рендерит рядом с ним. Поэтому изменение высоты #editor1 через CSS не будет работать.

Упрощенная структура HTML после рендеринга CKEditor 5 (классический редактор) выглядит следующим образом:

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

На самом деле HTML намного сложнее, потому что весь интерфейс CKEditor отображается. Однако наиболее важным элементом является "область редактирования" (или "поле редактирования"), помеченная классом ck-editor__editable_inline:

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

"Область редактирования" - это белый прямоугольник, в который можно ввести текст. Поэтому для стилизации/изменения высоты области редактирования достаточно нацелить редактируемый элемент с помощью CSS:

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

Ответ 2

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

Ответ 3

Установка высоты с помощью глобальной таблицы стилей. Просто добавьте в ваш общий файл .css (например, style.css):

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

Ответ 4

Что касается настройки ширины CKEditor 5:

CKEditor 5 больше не поставляется с настройкой конфигурации для изменения его ширины, но его шириной можно легко управлять с помощью CSS.

Чтобы установить ширину редактора (включая панель инструментов и область редактирования), достаточно задать ширину основного контейнера редактора (с .ck-editor класса .ck-editor):

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

Ответ 5

Добавьте его в таблицу стилей:

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

Ответ 6

Если вы хотите сделать это программно, лучший способ сделать это - использовать плагин. Вы можете легко сделать это следующим образом. Следующее работает с CKEditor 5 версии 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 );
    });

Или, если вы хотите добавить это в пользовательскую сборку, вы можете использовать следующий плагин.

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

Это добавляет новую конфигурацию в CKEditor под названием "minHeight", которая устанавливает минимальную высоту редактора, которую можно использовать следующим образом.

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