Way to style individual instances of CKEditors?

Question

I'm trying to style the width/height (including min/max width and height) of my ckeditors. I've ran across this post (about styling .ck-editor__editable_inline), but the problem is that I have multiple instances of editors on a page, and want to have different heights/widths for different instances of editors.

I've tried manually hanging the minheight of the particular div with .ck-editor__editable_inline class through javascript (styling editor.ui.view.editable._editableElement), but upon focusing the editor, the styling disappears.

score 0 · Accepted Answer · answered Jun 08 '20 at 06:09

One way I've found to approach this problem is through what is mentioned in this post which is to apply the styling again every time the focus of the editor is altered. This results in the follow code in my case:

CKEditor.PostEditor.create(e)
    .then(editor => {
        $('#submit-body-form').next().find('.ck-editor__editable_inline').addClass('post-editor-min-height');
        editor.ui.focusTracker.on('change:isFocused', (evt, name, value) => {
            $('#submit-body-form').next().find('.ck-editor__editable_inline').addClass('post-editor-min-height');
        });
    })

Way to style individual instances of CKEditors?

1 Answers1