web-dev-qa-db-ja.com

CKEditor 5（クラシックエディター）の高さを設定する方法

CKEditor 4にはエディターの高さを変更するための構成オプションがありました： config.height 。

CKEditor 5の高さを変更するにはどうすればよいですか？ （クラシックエディター）

ckeditorckeditor5
27
Wiktor Walc

他の人に役立つかもしれないので、自分の質問に答える。

CKEditor 5には、高さを変更する構成設定が付属しなくなりました。高さはCSSで簡単に制御できます。

ただし、 Classic Editor を使用する場合、注意が必要です。

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

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

次に、クラシックエディターは元の要素（ID editor1）を非表示にし、その隣にレンダリングします。そのため、CSSを使用して#editor1の高さを変更しても機能しません。

CKEditor 5（クラシックエディター）のレンダリング後の単純化されたHTML構造は、次のようになります。

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

実際には、CKEditor UI全体がレンダリングされるため、HTMLははるかに複雑です。ただし、最も重要な要素は、ck-editor__editable_inlineクラスでマークされた「編集領域」（または「編集ボックス」）です。

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

「編集エリア」は、テキストを入力できる白い長方形です。そのため、編集領域のスタイルを設定/変更するには、CSSを使用して編集可能な要素をターゲットにするだけで十分です。

<style>
.ck-editor__editable_inline {
    min-height: 400px;
}
</style>
68
Wiktor Walc
editor.ui.view.editable.editableElement.style.height = '300px';
9
daka83

グローバルスタイルシートで高さを設定します。 共通の.cssファイル（style.cssなど）に追加するだけです。

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

プログラムでこれを行う場合、プラグインを使用するのが最良の方法です。次のように簡単にできます。以下は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 MinHeightPlugin extends Plugin {
    init() {
        const minHeight = this.editor.config.get('minHeight');
        if (minHeight) {
            this.editor.ui.view.editable.extendTemplate({
                attributes: {
                    style: {
                        minHeight: minHeight
                    }
                }
            });
        }
    }
}

これにより、「minHeight」というCKEditorに新しい構成が追加され、このように使用できるエディターの最小の高さが設定されます。

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

スタイルシートに追加します。

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

CKEditor 5の幅の設定に関して：

CKEditor 5には、幅を変更する構成設定が付属しなくなりましたが、CSSで幅を簡単に制御できます。

エディターの幅（ツールバーと編集領域を含む）を設定するには、エディターのメインコンテナーの幅を（.ck-editorクラスを使用して）設定するだけで十分です。

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