Strange CKeditor Problem

[JayGee]

Hi all,

Having a strange problem with my CKeditor custom styles.

Trying to add standard bootstrap classes to the image alignment options. But for some reason if I add multiple classes to the centred image option it disappears from the editor drop down. But with only one class it works.

So this works:

 { name: 'Left Aligned Photo', element: 'img', attributes: { 'class': 'float-md-left img-fluid' } },
 { name: 'Right Aligned Photo', element: 'img', attributes: { 'class': 'float-md-right img-fluid' } },
 { name: 'Centered Photo', element: 'img', attributes: { 'class': 'img-fluid' } },

But this doesn't:

 { name: 'Left Aligned Photo', element: 'img', attributes: { 'class': 'float-md-left img-fluid' } },
 { name: 'Right Aligned Photo', element: 'img', attributes: { 'class': 'float-md-right img-fluid' } },
 { name: 'Centered Photo', element: 'img', attributes: { 'class': 'w-100 img-fluid' } }, 

Note the slight difference to the last line.

I've tried escaping the hyphens in case it was that but doesn't help.

Any ideas.... #puzzled!

[JayGee]

{ name: 'Left Aligned Photo', element: 'img', attributes: { 'class': 'float-md-left img-fluid' } },
 { name: 'Right Aligned Photo', element: 'img', attributes: { 'class': 'float-md-right img-fluid' } },
 { name: 'Centered Photo', element: 'img', attributes: { 'class': 'd-block img-fluid' } }, 

This alternative set of Bootstrap classes works fine - can't figure out what the common denominator is of the ones that don't work. It also doesn't seem to like more than 2 classes, not sure if there's a limit to the length of the attribute strings?

[wbmnfktr]

Try adding the classes in alphabetical order.

{ name: 'Left Aligned Photo', element: 'img', attributes: { 'class': 'float-md-left img-fluid' } },
{ name: 'Right Aligned Photo', element: 'img', attributes: { 'class': 'float-md-right img-fluid' } },
{ name: 'Centered Photo', element: 'img', attributes: { 'class': 'img-fluid w-100' } }, 

 

[JayGee]

50 minutes ago, wbmnfktr said:

Try adding the classes in alphabetical order.

{ name: 'Left Aligned Photo', element: 'img', attributes: { 'class': 'float-md-left img-fluid' } },
{ name: 'Right Aligned Photo', element: 'img', attributes: { 'class': 'float-md-right img-fluid' } },
{ name: 'Centered Photo', element: 'img', attributes: { 'class': 'img-fluid w-100' } }, 

 

I will do - is this a known issue then?

[wbmnfktr]

I stumbled across this solution a few times. There is/was a bug in CKeditor which affected those multiple class setups.

[JayGee]

On 9/20/2019 at 7:18 PM, wbmnfktr said:

Try adding the classes in alphabetical order.

{ name: 'Left Aligned Photo', element: 'img', attributes: { 'class': 'float-md-left img-fluid' } },
{ name: 'Right Aligned Photo', element: 'img', attributes: { 'class': 'float-md-right img-fluid' } },
{ name: 'Centered Photo', element: 'img', attributes: { 'class': 'img-fluid w-100' } }, 

 

Sorry for keeping you in suspense... but crazily I can confirm this works! Thanks for your help ?

[wbmnfktr]

I get paid by the hours so... oh wait. ? 

Good to hear it worked for you! ? 

[Jonathan Lahijani]

This doesn't seem to be a problem with PW 3.0.140 as far as I can tell.

[wbmnfktr]

In 3.0.137 a new version of CKeditor was added. Maybe that's the reason.

 https://processwire.com/blog/posts/pw-3.0.137/