Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.Problem/Motivation
CKEditor5 should integrate with Quickedit when enabled.
Proposed resolution
The Decoupled Editor seems like the best candidate for adding to the Quickedit toolbar.
It should probably be a separate plugin so that the javascript library is not added to sites which have Quickedit disabled for example.
Remaining tasks
- Copy / modify the existing code from the prototype
- Include Decoupled Editor js separately with the DLL build
| Comment | File | Size | Author |
|---|---|---|---|
| #8 | Screen Recording 2021-02-04 at 12.32.36.gif | 4.85 MB | lauriii |
| #4 | Screen Recording 2021-01-28 at 11.51.59.gif | 1.68 MB | lauriii |
Issue fork ckeditor5-3194048
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #3
zrpnrI added the code from the prototype to enable Quickedit support. I kept the minified js in its own library, but I'm not sure it's worth adding the overhead to conditionally include it, since it's only 5kb.
Comment #4
lauriiiSomething interesting I noticed was that the positioning of the editing area changes slightly when quickedit highlights a field with formatted text. Here's a gif to demonstrate that:
Comment #5
zrpnrCKEditor does add classes to the editable area.
.ck-editor__editable_inlineadds some x-padding and.ck-editor__editable.ck-rounded-cornersadds border radius.The offset is caused by QuickEdit js though, it adds some inline styles in
FieldDecorationView.js, check the_pad()function which gets properties from_getPositionProperties.Seems like maybe the existing padding plus the inline padding makes that function calculate a negative top and left position.
Comment #6
zrpnrI made some css to override the ckeditor styles when quickedit is enabled, does this seem like a good solution @lauriii ?
Comment #7
zrpnrRebased on 1.0.x
Comment #8
lauriiiThere's still something strange going on with the inline styles. Everytime field with CKEditor is focused, the inline styles seems to increase the spacing.
Comment #9
zrpnrI do see what you're talking about, with ck4 there are some big jumps and glitches but there is no top or left offset.
With CK5, the top and left offset keeps increasing every time. I didn't click back and forth as much so I didn't realize it was compounding.
It seems like Quickedit adds top, left, padding and width for editing elements, then calculates it again on blur.
It's hard to see where it happens but I think CK4 is wiping the top and left position off of the edited div, while CK5 does not make any style changes. This is why the offset keeps increasing for CK5, on each blur 5px gets added to top and left.
I created #3196689: Remove legacy Quick Edit JS style changes because I think the Quickedit js should be removed in core, it looks like it was written almost a decade ago and could be replaced with a single line to add or remove a class. Without that js, the boxes don't shift.
Removed the override styles I added in 0fbf87e0 but added some visual styles to match the look of ck4 in quickedit, removed border and background color on the editor.
Comment #10
wim leers+1
#4 + #5 + #9: ahhh, so this is the origin of #3196689: Remove legacy Quick Edit JS style changes! I already suspected it was related to your CKEditor work 🤓See my latest response at #3196689-7: Remove legacy Quick Edit JS style changes.
Next, I'll try this locally 😊
Comment #11
wim leersI expected that merge request to be waaaaaaaaaaaaaaaaaay more complicated!
I got sidetracked by what I think is a bug in Quick Edit — oh irony 😂
js/build/editor-decoupled.jsoriginate from?Comment #12
wim leersJust one minor thing left (an
@see) — other than that I think this is ready for now 🤓So going ahead and marking RTBC.Comment #14
zrpnr