Jump to content

Strange CKeditor Problem


Guy Incognito
 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

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By nabo
      Hello
      it would be nice if it could be possible to force a unique (or relative) imagefield for CKEditor.
      Example
      Using a repeater matrix (or repeater) with CKEditor field, the primary sources for images are imagefields in the page-repeater fieldset. Obviously I can change the page source, but I need to start from the root and this is not comfortable. In this specific situation the better solution is to have an imagefield in the parent page and force CKEditor to automatically go there... or if you want to have a "media library" go there first.
      Don't know which could be the best "setting system" but in my opinion this is an annoying problem.
    • By fruid
      inserting links i.e. <a>-elements, and only links, inside a CKEditor-summary field outputs the link-text and a weird " /> above the content-div (I'm using markup regions).
      I have no idea where this is coming from, all the other tags work perfectly, and the CKEditor-markup is fine too when adding links. It puts the <a>-element inside a <p> element but should be alright?
      Any hints?
    • By fruid
      I doubt nobody has seen this issue before…
      when I have an <h2> or <h3> or the likes in a CKEditor-body-field and I delete that header, the h-tag is applied to whatever comes next in line. I'm obviously talking about the WYSIWYG-view. Similar bugs occur when applying an h-tag, that tag sometimes encloses the next line as well. Could be that this happens when the next line is in the same "block"-element and not technically a new line but separated with a <br> but not always…
      When will a new version of CKEditor for PW be released or what's a competitive alternative at this point?
    • By Jennifer Stock
      Hi. Sometimes when I select text in a textarea field outfitted with CK Editor, it fails to register as a "Block Style" and therefore the custom styles I have specified for block-level elements are not displayed in the Styles drop-down menu. If I open the page in an incognito window and select the same elements, the Block Style styles appear as expected in the Styles menu.
      Is this a caching issue of some kind? I've played with turning on and off the HTML "quality assurance" options as well as putting my custom styles directly within the CKEditor folder in the /wire directory. Once the field stops registering the selection of block-level elements, it also seems to have simultaneously stripped the custom styles that had been successfully applied to these block-level elements previously.
      Not sure what to do next.
×
×
  • Create New...