Opened 8 years ago

Last modified 8 years ago

#14529 confirmed Bug

Applying Styles can sometimes break existing content (especially widgets)

Reported by: Chris Owned by:
Priority: Normal Milestone:
Component: Core : Styles Version:
Keywords: Cc:


Note: This is more prevalent when using BR as the enter mode and not using automatic paragraphs, which is our preferred configuration.

Steps to reproduce

  1. In the config, set enter mode to BR and automatic paragraph off
  2. In any container's editable portion (I am using a widget that emulates a bootstrap panel.) add some text, maybe even 2 lines
  3. using the styles dropdown, select 'Heading 2' to convert the text to an H2

Expected result

Selected text would be wrapped with an H2

Actual result

The container div gets converted to an H2 and any attributes are applied. This is what is breaking the widget editable portion.

Other details (browser, OS, CKEditor version, installed plugins)

using widget and some custom plugins that are simple bootstrap grid system and panels.

See attached picture.

Attachments (2)

style changes wiget structure.png (8.7 KB) - added by Chris 8 years ago.
screenshot of style issues (13.8 KB) - added by Chris 8 years ago.
custom bootstrap panel plugin with config

Download all attachments as: .zip

Change History (8)

Changed 8 years ago by Chris

screenshot of style issues

comment:1 Changed 8 years ago by Chris

Keywords: styles added; sytles removed

comment:2 Changed 8 years ago by Jakub Ś

Keywords: styles enter mode automatic paragraph removed
Resolution: invalid
Status: newclosed
Version: 4.5.7


Your sample widget doesn't work at all. It contains only a template so I can't reproduce this problem in anyway based on your attachment.

I have extended allowedContent of the default simplebox plugin - selector: '.simplebox-content', allowedContent: 'p br ul ol li strong em h2' but all worked as expected. I was able to enter H2 inside content area and no problem occured, even after setting enterMode : CKEDITOR.ENTER_BR, autoParagraph : false.

I can see that you have inline widget as well. Please note that in case of inline widget its wrapper will most likely be the inline span. You should not insert H2 (block-content) into such widget (represented by inline element).

I'm closing this issue as invalid for now. Please provide reduced, working sample. We will validate it and consider reopening this ticket.

Changed 8 years ago by Chris

Attachment: added

custom bootstrap panel plugin with config

comment:3 Changed 8 years ago by Chris

I've attached my custom plugin which makes a simple bootstrap panel. You should be able to follow my STR to reproduce. There shouldn't be anything special about my widget. Applying a Heading 2 to selected text in the body breaks the container. Also, once broken, if you go to source and back, that content is gone.

comment:4 Changed 8 years ago by Jakub Ś

Thank you for the code. Yes, you are right, the content editable for the widget is not protected and one block element like H2 can replace another block element like div. This is in fact how CKEditor works by default, one block element replaces another, but the main problem is that this div is content editable so the behaviour is not desired in such case.

From what I have checked there are two culprits: config.enterMode = CKEDITOR.ENTER_BR; and config.autoParagraph = false;

Without these config options everything works as expected.

@pitchingchris please note that you are disabling autoParagraph which is now deprecated and as mentioned in docs it should not used.
I'm not sure if this case with autoparagraph is valid and if we will be fixing it.

@m.lewandowski could you perhaps comment on this ticket?

comment:5 Changed 8 years ago by Jakub Ś

Resolution: invalid
Status: closedreopened

#14508 was marked as duplicate.

comment:6 Changed 8 years ago by Marek Lewandowski

Status: reopenedconfirmed

Yes, I can confirm that this should not happen. Wrapper should not be touched by this UC. Potential problem could be in the iterator, but it's just a blind guess.

Note: See TracTickets for help on using tickets.
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy