CK Editor Custom Styles

[Jon]

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?

Cheers

Jon

[Christophe]

Hello,

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?

[Fokke]

Have you checked if there's any JS errors in console?  Perhaps there's an error in your mystyles.js, or the file was not found.

[Jon]

@Christophe

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

@Fokke

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?

Cheers

Jon

[Christophe]

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.

[Jon]

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' }
] );

[design-a-point]

Hi,

 

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

 

Cheers

Alex

[nuel]

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

[nuel]

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.

 

[nurkka]

I noticed that, in my case, I cannot have more than one CKEditor field with mystyles.js on the same template, except within repeaters or repeater matrix fields. The solution was to configure mystyles.js only for the first textarea CKEditor field and to use the feature "Inherit settings from another CKE field" for the others. Then the custom styles work as expected.