Jump to content
Guy Incognito

CKEditor custom styles work in frontend editor not backend

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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. 🙂

 

Share this post


Link to post
Share on other sites
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
  ]
);

 

  • Like 3

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

@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.

 

  • Like 1

Share this post


Link to post
Share on other sites

@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 by Hurme

Share this post


Link to post
Share on other sites

#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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Typical. 😖

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

  • 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 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 Liam88
      Hello all,
      I'm having a moment with CKeditor and hoping someone will be able to assist.
      I want to change the structure of the table plugin to automatically add the following:
      Schema.org markup to signify it's a table. Aria-label and roles for each of the table elements. At the moment if I add them in manually, the plugin removes them. I'd like to have this as default.  Here is an example: Additional classes. The plugin has the option for a table ID, but where possible I'd rather use classes. I have searched far and wide on the ol Google but struggling on this. I'm not the most experienced and would appreciate any direction on this.
      It's mainly a case of where best to make said adjustments. 
      Thank you in advance!
      Liam
       
    • By spercy16
      After doing a Google search for the issue I saw several previous posts mentioning this same issue but cannot figure out how to fix it and shouldn't have to spend a half hour trying to. ProcessWire frequently logs out of the admin area after less than five minutes. It shouldn't time-out ever, and if someone wanted that option for security reasons they should be able to enable it through the settings in their admin panel. In addition to it not being the default setting, users also shouldn't need to edit your config files manually to change these kinds of settings. Please fix the major issue in a future release. It's absured imho that developers don't realize the inconvenience it places on other people if they have to login every time they switch back to that page. It has also logged me out without warning without any visual que that it did so. If someone was working on paragraphs of content they could easily lose their work do to this bug as well... Please don't refer me to a forum with a dozen possible solutions to the issue and fix it yourselves. I'm sick of looking at them. It's your job to troubleshoot your software, not your users!
    • 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.
    • By benbyf
      Hello, and welcome to what I though was either my client being silly and changing things, or some evil doer. Turns out its reproducible and therefore something in Proceswire (I checked my templates and modules but couldnt find anything that would be doing this...). So what is it doing? Check out the video for evidence.
      A repeater field is interacting with a page template and another repeater field somehow to swap the fields in the template and repeater over...
      I have a template called team, and a repeater field called team_repeater with label Team. Some how and for some reason, when I change my fields on repeater called main_menu_links my team template gets those fields and when I try and revert the team template fields to the fields it should have, they get given to the repeater main_menu_links. Also this to say HELP!!!!!
      video: https://www.dropbox.com/s/exkdhc6n7x0xpsa/strange-repeater-PW-mega-bug.mov?dl=0
×
×
  • Create New...