Jump to content

CKEditor custom styles work in frontend editor not backend


Guy Incognito
 Share

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.

Link to comment
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. 🙂

 

Link to comment
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
Link to comment
Share on other sites

  • 6 months later...

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?

Link to comment
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
Link to comment
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

Link to comment
Share on other sites

  • 3 weeks later...

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.

Link to comment
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.

Link to comment
Share on other sites

  • 3 weeks later...

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
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
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By Guy Incognito
      I'm trying to build a search selector that includes a checkbox multiple option field (clinicdetails_specialisms). The whole selector works fine if I don't include the checkbox field. With it included I get errors like "Error: Exception: SQLSTATE[HY093]: Invalid parameter number: mixed named and positional parameters (in wire/core/PageFinder.php line 627)".
      This is the selector as it currently stands.
      subscription_status=active,(template=user,clinicdetails_description|clinicdetails_short_description|clinicdetails_clinic_name|clinicdetails_first_name|clinicdetails_last_name*=$query),(clinicdetails_specialisms.title=$query) I've also tried setting the specialisms field in one string rather than groups and have also tried with/without the '.title' property.
      Oddly the selector works if specialisms is the only field being searched. It seems to fail when mixed with other selectors.
      Can anyone advise what stupid mistake I'm making!
    • 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?
×
×
  • Create New...