Jump to content
Guy Incognito

Strange CKeditor Problem

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!

Share this post


Link to post
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?

Share this post


Link to post
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

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites

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

  • Like 2

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By prestoav
      Hi all and thanks for the great work on PW!

      One thing I find I have to do on any new site is add the Justify plugin to textarea fields as it is such a widely required feature for text headings in content.

      ANy chance this could be added to the core an automatically be installed on new textarea fields using CKEditor?

      Thank you!
    • By AndréPortuga
      Does anyone knows if there is a way of selecting a iframe inside a textfield(using ckEditor)? 
      I mean I have a Iframe with this code:
      <iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" scrolling="no" src="https://www.youtube.com/embed/PMaFJjZDrYM" width="100%"></iframe></p>
       
      but it's not getting responsive in iPhones.. So anyone know how can I select it via code for making it responsive?
       
      Thank you,
    • By dragan
      On one particular site, CKEditor behaves rather weird:
      When I copy and paste "normally", i.e. CTRL + V, there is an alert popping up "do you really want to leave this page?". If you cancel, the text is pasted into the field. If not, you get redirected to the frontend of the page you just edited, and the changes are lost.
      The "paste from Word" button doesn't work. CTRL + SHIFT + V works, but all formatting is lost (apart from paragraphs).
      I'm using inline editor mode, ACF + Purifier are activated. I know that if I disable those two, CTRL + V works, but I won't do that, since CKE then saves all the garbage code from MS-Office.
      Has anyone ever come across this issue? I tried with Chrome + FF. No JS errors.
    • By AndZyk
      Hello,
      I am currently building a intranet which will be hosted on the local network of a company. This intranet has many links to files on their fileserver with the protocol file://.
      So for example the links look like this file://domain.tld/filename.ext
      When I try to insert such a link into a URL field, I get the error, that only the protocol http:// is allowed. When I try to insert such a link into a CKEeditor link, it gets stripped out. Is it possible to insert such links into the FieldType URL and CKEditor.
      I know that I could use a FieldType Text or insert a RewriteRule in the .htaccess file, but I am looking for a more elegant solution. 😉
      Regards, Andreas
    • By prestoav
      Hi folks.
      I'm building a Formbuilder form to create new advert pages in a marketplace. Formbuilder is ideal for this. I need to add a description field that allows text to be added with line breaks etc. so showing a CKEditor field would be ideal (i.e. exactly like the field I'm typing into right now)!.
      Does anyone know if it's possible to add a CKEditor field to the front end presentation fo a Formbuilder field, maybe via a module or such?
      Many thanks!
×
×
  • Create New...