To reproduce:

  1. Add a custom style to CKEditor; e.g. div.custom|Custom Class
  2. Edit a node
  3. Add/upload an image
  4. Select the image and apply the custom style

In a previous beta--I forget which--the result would be the div block with the custom class wrapped around the image; i.e.

<div class="custom"><img ...></div>

Now, however, CKEditor crashes, and I see this error in the JS Console:

Uncaught TypeError: Cannot read property 'attributes' of null

The error points to ckeditor.js:972, but ckeditor is minified here.

CommentFileSizeAuthor
#4 step3_viewing_source.png63.81 KBthpoul
#4 step2_applying_custom_style.png209.18 KBthpoul
#4 step1_adding_image.png208.31 KBthpoul

Comments

CacheHit created an issue. See original summary.

Corregidor’s picture

Corregidor commented
Issue summary: View changes
Corregidor’s picture

Corregidor commented
Version: 8.0.0-rc3 » 8.0.x-dev
thpoul’s picture

thpoul commented
StatusFileSize
new step1_adding_image.png208.31 KB
new step2_applying_custom_style.png209.18 KB
new step3_viewing_source.png63.81 KB

I am not able to reproduce in latest 8.0.x fresh installation. (tried both basic and full html editors just in case) Attaching screenshots.

@epong Is this still happening in rc4 for you and if so can you provide more information?

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Category: Bug report » Support request
Status: Active » Postponed (maintainer needs more info)
Corregidor’s picture

Corregidor commented

Running off head now, and I can't reproduce this anymore. Custom style applies as expected. Not sure what might have changed. Thanks @thpoul for testing!

Corregidor’s picture

Corregidor commented
Status: Postponed (maintainer needs more info) » Closed (cannot reproduce)
othermachines’s picture

othermachines commented
Status: Closed (cannot reproduce) » Active

So today I experienced the problem exactly as described in the original post, but using version 8.2.3.

Fortunately I did locate the source of the trouble. I had a stylesheet from a contributed theme loading into CKEditor via hook_ckeditor_css_alter(). That stylesheet contained this:

img { display: block; }

Yep. That's it. Of course the img element is expected to be an inline, not a block, element. This is causing some kind of crazy mix-up somewhere. Easy fix was to load another stylesheet after this one to override the rule.

Now I'm not sure that this is something we'd want to try to prevent, or if it's a CKEditor-specific thing. What I do know is I had a heck of a time finding the problem so wanted to share my solution regardless.

Cheers -

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Status: Active » Fixed

@othermachines: thanks!

Whoever authored that theme clearly made a grave mistake then! I hope your answer may help somebody else in the future :)

Status: Fixed » Closed (fixed)

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