Problem/Motivation

Steps to reproduce

- Drupal 10, default theme
- Install/enable module, add to CKEditor
- Create some content, add Bootstrap grid to the body of content, add some text, save
- Go to content page as editor or as ANON user (browsers used: Chrome, Safari, FireFox)

Content is displayed in an editable div (see video of the issue).

The issue is div has attribute contenteditable="true" see reference: Mozilla docs - contenteditable
see screenshot:
source code of column

Proposed resolution

Remove any CKEditor-related classes and attributes before rendering content

This issue is very significant for D10/CKEditor 5.

Maybe implement Bootstrap Grid like this https://www.drupal.org/project/ckeditor_accordion?

CommentFileSizeAuthor
EditableDiv-SourceCode.png264.01 KBjannakha
EditableDiv.gif337.62 KBjannakha

Issue fork ckeditor_bs_grid-3364757

Command icon 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:

About issue forks
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

jannakha created an issue. See original summary.

b_sharpe made their first commit to this issue’s fork.

b_sharpe’s picture

b_sharpe CreditAttribution: b_sharpe at ImageX commented
Assigned: Unassigned » b_sharpe
Status: Active » Needs work
jannakha’s picture

jannakha CreditAttribution: jannakha as a volunteer and at Tomato Elephant Studio commented

maybe a Filter is an answer? they are already used to clean up/fix up HTML in CK Editor.
Here's an example:
https://git.drupalcode.org/project/drupal/-/blob/10.1.x/core/modules/fil...

Thomas Kaisuka’s picture

Thomas Kaisuka CreditAttribution: Thomas Kaisuka as a volunteer and at Century Marvel Digital Solutions commented

I just ran into this problem. It makes content rendering messy for anonymous users

b_sharpe opened merge request !15

b_sharpe’s picture

b_sharpe CreditAttribution: b_sharpe at ImageX commented
Status: Needs work » Needs review

MR should fix the issue. Unfortunately this does not fix already created grids unless you edit/save. As mentioned before you might be able to use a filter to do fix existing content.

jannakha’s picture

jannakha CreditAttribution: jannakha as a volunteer and at Tomato Elephant Studio commented
Status: Needs review » Reviewed & tested by the community

tested on D10 - works!

thanks for the patch!

ivnish’s picture

ivnish CreditAttribution: ivnish commented

MR works, but I need to recreate my grid.

Please commit and create new release soon

  • b_sharpe committed b897a615 on 2.0.x 
    Issue #3364757: Content of grid is editable
b_sharpe’s picture

b_sharpe CreditAttribution: b_sharpe at ImageX commented
Status: Reviewed & tested by the community » Fixed

Committed, thanks

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.