Jump to content

Strange CKeditor Problem


JayGee
 Share

Recommended Posts

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!

Link to comment
Share on other sites

{ 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?

Link to comment
Share on other sites

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' } }, 

 

  • Thanks 1
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 ?

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...