Jump to content

CK Editor Custom Styles


Recommended Posts

Hello All,

I cant seem to get styles working in CK Editor. I have followed the github tutorial here. I copied mystyles.js from wire to site and changed the "Custom Editor JS Style Set" to mystyles:/site/modules/InputfieldCKEditor/mystyles.js as soon as I do this the style box is empty then when I click within the content the style box is disabled. 

Any Ideas?



Link to comment
Share on other sites


Do the related css rules already exist?

And, in Admin > Setup > Fields > Edit Field: body (or another field), and then in the "Input" tab, have you allowed new classes, etc. in "Extra Allowed Content", so that CKEditor doesn't remove them?

Link to comment
Share on other sites


Yes the rules already exist and I have places the new Classes in Extra Allowed Content. It more the case of the Style dropdown.


I have check for JS errors in console and getting nothing.

I dont know where the styles list is being loaded as I've copied mystyles.js from wire into site and changes the Small option to xSmall just to see if the file is actually loading but it still remains Small.  

Any more Ideas?



Link to comment
Share on other sites

Can you paste the content of your mystyles.js here?

No comma is missing, and you don't have a comma at the end? It already happened to me while adding or changing (the order of) some lines.

I had the same problem as yours at least once, if I remember well, or perhaps it was a variant, but I don't remember what was the problem.

Link to comment
Share on other sites

Sure, my mystyle.js pretty much identical to the default apart from i've added X at the start of small to see if its being picked up

 * mystyles.js
 * This file may be used when you have "Styles" as one of the items in your toolbar.
 * For a more comprehensive example, see the file ./ckeditor-[version]/styles.js
CKEDITOR.stylesSet.add( 'mystyles', [ 
 { name: 'Inline Code', element: 'code' }, 
 { name: 'Inline Quotation', element: 'q' },
 { name: 'Left Aligned Photo', element: 'img', attributes: { 'class': 'align_left' } },
 { name: 'Right Aligned Photo', element: 'img', attributes: { 'class': 'align_right' } },
 { name: 'Centered Photo', element: 'img', attributes: { 'class': 'align_center' } }, 
 { name: 'xSmall', element: 'small' },
 { name: 'Deleted Text', element: 'del' },
 { name: 'Inserted Text', element: 'ins' },
 { name: 'Cited Work', element: 'cite' }
] );

Link to comment
Share on other sites

  • 5 months later...



I once had this issue too, where the styles did not appear at all. For me it helped to clear the browser cache and clearing the session. Once I logged in again and did a complete page reload, it worked again...


Currently I'm experiencing another issue related to custom CKEditor styles:

I have two textarea fields with CKEditor as inputfield type and both have the JS styleset option set (to the same value).

When editing a page which uses this template, the custom styleset only works for the first CKEditor instance. The following ones only show the default style options.

Changing the order of fields in the template won't work, so it's really related to the order in which the fields are added in the template. It's without exception only the first field where it works properly...

Can anyone reproduce this issue? I'm using PW 3.0.21.

Edit: Hm... just upgraded to PW 3.0.23 and now everything works properly




Link to comment
Share on other sites

  • 5 years later...

Hey People

Jon, was this issue ever solved? I'm experiencing something similar too.

My custom styles basically work perfectly, as usual (modified clone of contents.css and mystyles.js), but now they are not accessible in certain templates. Same field, other template.

Any ideas? I'm running 3.0.184.

Thanks, Nuél

Link to comment
Share on other sites

Ok, 5 minutes later, I just made it work again.

I have two textarea fields with custom styles only available in the second. That doesn't work somehow. Had to add the styles to the first field as well, now it's working in both. Tested it twice.


Link to comment
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 Tom Walcher
      Hey there,
      I am using PW for more than two years now and it satisfied me in all scales. Can just say: Build Bigger, Faster, Stronger, Easier.
      Now we are up to make a site for refugees also in arabic and farsi.
      Frontend is no problem, but how to make the Textarea/CK Editor Right to Left for Arabic?
      … and/or custom Css to the Languages - is there a proper way?
  • Create New...