CKEditor custom styles work in frontend editor not backend

[JayGee]

I added some custom styles to the CKeditor menu bar using the example mystyles.js and the PW tutorial. This worked fine for fields when editing on the frontend. But none of our custom styles showed in the backend editor dropdown unless we edited the core copy of mystyles.js in wire/modules.

Is this correct behaviour, a bug or a mistake on my part? Tried clearing cache, logging in/out etc but the backend ignores our custom styles in the site/modules path.

[AndZyk]

Hello @Guy Incognito,

can you select your custom styles in the Styles dropdown? Do you have selected the custom style but don't see any change?

If you have selected a custom style and want to change the appearance inside the CKEditor, you also have to add a custom editor CSS file. ?

Regards, Andreas

[JayGee]

10 minutes ago, AndZyk said:

Hello @Guy Incognito,

can you select your custom styles in the Styles dropdown? Do you have selected the custom style but don't see any change?

If you have selected a custom style and want to change the appearance inside the CKEditor, you also have to add a custom editor CSS file. ?

Regards, Andreas

Hi Andreas,

The custom styles aren't available to choose in the back end. On the front-end, it behaves exactly as I would expect with context-aware styles available in the drop-down, with the adding bonus of live style updates as you would expect in the front end template.

I'm not too fussed about the changes appearing accurately in the back end so haven't put in the editor css, but the styles just aren't available in the drop-down unless modifying the core mystyles.js. Front end they appear fine in the drop down.

Does that make sense? I'll have to take some screenshots if not. ?

 

[BitPoet]

1 hour ago, Guy Incognito said:

The custom styles aren't available to choose in the back end. On the front-end, it behaves exactly as I would expect with context-aware styles available in the drop-down, with the adding bonus of live style updates as you would expect in the front end template.

I'm not too fussed about the changes appearing accurately in the back end so haven't put in the editor css, but the styles just aren't available in the drop-down unless modifying the core mystyles.js. Front end they appear fine in the drop down.

If I recall right, I read a discussion or issue about mystyles.js always pointing to the core file in the backend some time ago. The solution there I think was to replace the word mystyles with something different, e.g. renaming site/modules/InputfieldCKEditor/mystyles.js to customstyles.js and using a different name as prefix in the inputfield settings:

customstyles:/site/modules/InputfieldCKEditor/customstyles.js

Of course, the name change also needs to be done inside customstyles.js:

CKEDITOR.stylesSet.add( 'customstyles', [
	// style definitions
  ]
);

 

[gmclelland]

Yep, BitPoet is correct.  See 

 

[JayGee]

Awesome thanks @BitPoet and  @gmclelland - I knew there would be a fix ? Will give this a try.

[Hurme]

I've gone through several threads here, but I cannot get this to work at all.

Whether I try to edit the mystyles.js in site/modules or create a new .js file in templates/js it's always the same, either it gives the default options or the styles menu is empty without anything.

Has there in been any progress on this? Anything new I should take into consideration?

[gmclelland]

@Hurme - carefully read my explanation, I think it will fix your problem.  If not, try posting the code you are using so that we can see what is wrong.

 

[Hurme]

@gmclelland Your explanation was among the threads I read when I was trying to make it work.

Here are some things I've tried:

1) Editing site\modules\InputfieldCKEditor/mystyles.js directly.

2) Renaming site\modules\InputfieldCKEditor/mystyles.js to customstyles.js (also changing the CKEDITOR.stylesSet.add( 'mystyles',... to 'customstyles'. Then adding proper path in the textarea fields Custom Editor JS Style Set to 'customstyles:/site/modules/InputfieldCKEditor/customstyles.js'. Basically doing it by your instructions.

3) Trying above but with the customstyles.js in my 'site/templates/js' folder instead.

None of these has any effect what so ever. The third option simply wipes the styles pulldown empty altogether.

Edited April 24, 2019 by Hurme

[gmclelland]

#2. Should work.  It's working for me.  Maybe your browser is caching the wrong .js files?  Maybe even try a Modules>Refresh after you make the changes?

Can you post your customstyles.js file here so we can see it?

Here is my site/modules/InputfieldCKEditor/custom-styles.js

Spoiler

/**
 * clone of mystyles.js - for ProcessWire CKEditor "Custom Editor Styles Set" option
 *
 * Example file for "Custom Editor Styles Set" as seen in your CKEditor field config.
 * This file is not in use unless you specify it for that configuration item.
 *
 * PLEASE NOTE:
 *
 * It's possible this file may be out of date since it is in /site/ rather than /wire/,
 * and the version of this file will reflect whatever version you had when you first
 * installed this copy of ProcessWire.
 *
 * If you intend to use this, you may first want to get the newest copy out of:
 * /wire/modules/Inputfield/InputfieldCKEditor/mystyles.js
 *
 * For a more comprehensive example, see:
 * /wire/modules/Inputfield/InputfieldCKEditor/ckeditor-[version]/styles.js
 *
 */

CKEDITOR.stylesSet.add( 'custom-styles', [
 { 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: 'Button', element: 'a', attributes: { 'class': 'button' } },
 { name: 'Button - Tiny', element: 'a', attributes: { 'class': 'button tiny' } },
 { name: 'Button - Small', element: 'a', attributes: { 'class': 'button small' } },
 { name: 'Button - Large', element: 'a', attributes: { 'class': 'button large' } },
 { name: 'Callout - Success', element: 'p', attributes: { 'class': 'callout success' } },
 { name: 'Callout - Warning', element: 'p', attributes: { 'class': 'callout warning' } },
 { name: 'Callout - Alert', element: 'p', attributes: { 'class': 'callout alert' } },
 { name: 'Callout - Primary', element: 'p', attributes: { 'class': 'callout primary' } },
 { name: 'Callout - Secondary', element: 'p', attributes: { 'class': 'callout secondary' } },
 { name: 'Small', element: 'small' },
 { name: 'Deleted Text', element: 'del' },
 { name: 'Inserted Text', element: 'ins' },
 { name: 'Cited Work', element: 'cite' }
]);

 

Hope that helps

[Hurme]

Hi @gmclelland, my customstyles.js is shown below.

The backend field is set to point: customstyles:/site/modules/InputfieldCKEditor/customstyles.js

When I open source code while editing a page there's a line like this:
"stylesSet": "customstyles:/(some project folders here)/site/modules/InputfieldCKEditor/customstyles.js?nc=1556022816",

So it seems to find its way there, but the styles menu remains empty. I've also tried refreshing the modules like you suggested.

CKEDITOR.stylesSet.add( 'customstyles', [
 { 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: 'Lead', element: 'p', attributes: { 'class: uk-text-lead' } },
 { name: 'Large', element: 'p', attributes: { 'class: uk-text-large'} },
 { name: 'Small', element: 'p', attributes: { 'class: uk-text-small'} }
]);

I also tried with your file (including changing file name to custom-styles.js), but this didn't have any effect either.

[Hurme]

And I just noticed what was wrong. My .js file was missing couple of ' around the classes.

Typical. ?

[wbmnfktr]

Had this happen quite often in previous versions of ProcessWire. With 3.0.123 (I guess - maybe even earlier) it worked right from the start.

In those prior versions I worked out a trick somehow. Therefore I created another textarea field, added it to the template, changed the field's settings to use the same myStyles.js and all of a sudden it worked.

In some cases using another browser or private window, resetting the whole cache and cookies worked as well.

And sometimes I just tinkered within the wrong fields, didn't save my files or was on a wrong instance.

[wbmnfktr]

In addition to my previous post some more details about a problem I recently faced with myStyles.js.

The browser console showed the following error:
Uncaught Error: [CKEDITOR.resourceManager.add] The resource name "mystyles" is already registered.

The template had 3 textarea fields but only one of these fields had a custom myStyles.js. After adding the custom myStyles.js to the other two fields everything worked as expected again.

Maybe this detail helps in the future.