How to set a fixed width on CKEditor 5 contents?

[jenlampton]

I would like to be able to resize specific parts of the editor without breaking the styling, specifically, I need to limit my character count (so that the text on the edit form breaks at the same place as the text on the front-end of the site) but I do not want that width restriction to cause problems with the editor's button placement.

Default editor:

On the front-end of my site (at this same breakpoint), this text needs to break after the word My so I want to adjust the width to (for example) 660px.

My optons are:

1. force the buttons onto multiple lines (add max-wdith to .text-format-wrapper)

2. accidentally remove borders from button bar and formatting textarea (add max-wdith to .ck-content)

Adjusting the borders is also pretty painful because of the way CKeditor has added them - but we have also done something funny with the missing top-border on the filter-wrapper fieldset -- perhaps to account for the way ck editor has added there.s

Recommended solution

I have no idea :) I just wanted to document this frustration since I encounter it often, and if others do also perhaps we can think of a way to make this easier on all of us.

This issue was sparked by https://github.com/backdrop/backdrop-issues/issues/6845 where I noticed how inflexible the styles were on the rich-text editor.

[indigoxela]

so that the text on the edit form breaks at the same place as the text on the front-end of the site...

That sounds tricky (if not impossible) to implement.

The editor div has no information available, which size limits apply to the final display. The main problem (IMO) is, that there seems to be some tendency to use the admin theme for content creation. If using the default theme (and actual layout), node contents would already be WYSIWYG. Using the default theme for content creation/edits is my personal preference, btw. Never understood that "Use the administration theme..." default setting.

This gets extra tricky, when we're talking about snippets either provided as "reusable block content", or as "pathless content" inside layouts. I belief, this part isn't feasible at all. Not having true WYSIWYG for that is unavoidable. We can not know, in which region this gets placed (at that point we're in a dialog with its own size restrictions, or on a node page). And even if we fiddled that, we couldn't simulate responsive content.

[olafgrabienski]

(...) I want to adjust the width to (for example) 660px.

This works for me (in ckeditor5.css):

.ck-content > * {
  max-width: 660px;
}

[quicksketch]

I am not sure if this would work for your use-case, but if the button wrapping is the primary annoyance, you could re-enable the automatic button collapsing feature of CKEditor 5 by setting shouldNotGroupWhenFull to FALSE. See the toolbar documentation.

That would put all the excess buttons under three dots:

Backdrop core sets this value to TRUE to retain button wrapping instead of collapsing by default. I think this was to match the CKEditor 4 behavior.