John W.

How can I move ckeditor styles.js to another site folder?

Recommended Posts

This question has probably been beaten to death - think I'm approaching this wrong. 

Anyway, I've got a textarea input field that uses ckeditor.

Under the fields Input section I managed to add my custom style sheet in the 'Custom Editor CSS File (regular mode) section for instance:

/site/templates/css/ckeditor.css

This seems to work fine.

What I'm trying to do now is add a custom style to the ckeditor styles menu, for instance, called .green_button

(p.s. in the ckeditor styles.js I added this to the inline section : { name: 'Green Button', element: 'a', attributes: { 'class': 'button' } },

 

Ok, onto the problem...

I notice that PW, by default, is using  /wire/modules/inputfield/inputfieldCKEditor/ckeditor-4.5.10/styles.js

So, I copied this into /site/templates/js/mystyles.js

Next, I added the above to the 'Custom Editor JS Styles Set' field, however, it doesn't seem to load myckeditorstyles.js -- rather continues to load the one from the /wire/modules... folder.

I cleared all history and caching in Safari (also tried Chrome, etc).

I'm wondering if there is something else I need to do to have PW load my /site/templates/js/myckeditorstyles.js instead of the one in /wire/modules.../ckeditor-4.5.10/styles.js ?

Thanks!

 

 

Screen Shot 2017-04-20 at 4.26.41 PM.png

Edited by holmescreek
wrong filename in topic title

Share this post


Link to post
Share on other sites

you have to follow the format:

mystyles: /site/modules/etc..

you only have the path; also make sure to change the name of the styleset to add, so it doesn't conflict with the core.

  • Like 2

Share this post


Link to post
Share on other sites
On 4/20/2017 at 8:57 PM, Macrura said:

you have to follow the format:

mystyles: /site/modules/etc..

you only have the path; also make sure to change the name of the styleset to add, so it doesn't conflict with the core.

Thanks, that fixed it.  There was a space between mystyles: and /site/modules/ ... the the correct syntax mystyles:/site/... and not mystyles :/site/...

A note for other readers, the Styles drop-down wasn't displaying anything after the change quoted above. However changing the style name in the mystyles.js file 

from:

CKEDITOR.stylesSet.add( 'default', [

to:

CKEDITOR.stylesSet.add( 'mystyles', [

fixed the issue of the styles list being empty.

@Macrura - thanks!

  • Like 2

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 Chris Bennett
      Not sure where I originally saw it while lurking around the forums, but someone, somewhere at some time was asking about styling Uikit checkboxes as toggle-style switches, much like the ones at the bottom of this post asking me if I want to be notified of replies.
      So here is my humble offering, rough and ready,  which can be thrown in at the bottom of your Uikit css as a starting point.
      Everything is based on ems and rems, so you can increase size as you desire by altering the single instance of font-size.
      It only targets single instances of labels within a specific field to a) try to limit unintended consequences and b) because in those cases it often seems more user-friendly to have an on/off binary switch rather than a checkbox. It's still totally a checkbox, just styled differently.
       
      .uk-form-controls-text label:only-of-type input.uk-checkbox { font-size:.8rem; margin-top:0; position:relative; -webkit-appearance:none; outline:none; width:4em; height:2.4em; border:2px solid #D6D6D6; border-radius: 3em; box-shadow:inset 5em 0 0 0 #DDD; flex-shrink: 0; } .uk-form-controls-text label:only-of-type input.uk-checkbox:after { content:""; position:absolute; top:.25em; left:.25em; background:#FFF; width:1.6em; height:1.6em; border-radius:50%; transition:all 250ms ease 20ms; box-shadow:.05em .25em .5em rgba(0,0,0,0.2); } .uk-form-controls-text label:only-of-type input.uk-checkbox:checked { background-color: transparent; box-shadow:inset 5em 0 0 0 #4ed164; border-color:#67bba5; } .uk-form-controls-text label:only-of-type input.uk-checkbox:checked:after { left:1.85em; box-shadow:0 0 1em rgba(0,0,0,0.2); } label:only-of-type input.uk-checkbox:checked + span { color:#008a00; transition:all 250ms ease 20ms; } .InputfieldCheckbox .InputfieldContent label:only-of-type {display:flex;} label:only-of-type input.uk-checkbox + span { color:#c3c3c3; display:flex; align-items:center; line-height:1.1; } /* Below is only necessary if you want the optional "tick" after items when selected */ label:only-of-type input.uk-checkbox + span:after { flex-shrink:0; margin-left:.5em;width:2em; opacity:0; content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 250'%3E%3Ccircle cx='125' cy='125' r='125' fill='%23231F20' opacity='.1'/%3E%3Cpath fill='%230B8B44' d='M95.823 139.432l-32.492-32.56-31.872 31.883-.008-.008 63.72 63.732L218.549 79.116 187.494 47.52z'/%3E%3C/svg%3E"); } label:only-of-type input.uk-checkbox:checked + span:after { opacity:1; transition: opacity 250ms ease 150ms; }  

    • By Gadgetto
      Hello,
      is it possible to configure CKEditor to have syntax highlighting enabled in Source and/or Sourcedialog? Coming from MODX i had this feature enabled and now I'm trying to find a solution for PW too.
      I'd like to have both the WysiWyg Editor and the Source editor with syntax highlighting enabled in on field.
      Andy plugins to achieve this?
      Greetings,
      Martin
    • By gebeer
      Hello,
      I have a user page template with many fields that are organised in tabs. Tabs do not work on the profile edit screen. So I had to find a way how to let users edit their page with tabs in place.
      The way I solved this is having users edit their user page in the backend instead of their profile page. So basically they are on a page edit screen and not on their profile edit screen which is a different process. The drawback of this method is that the users edit their profile on a URL like .../youradminurl/access/users/edit/?id=1377. So I needed to make sure that users cannot edit other users' profiles by just switching out the id. I did this through hooks that redirect them to their own profile.
      This is far from a perfect solution. Ideally I would like to mask the page edit url to something like /myprofile but haven't found a way on how to do this, yet.
      How would you go about this?
      redirect rules in .htaccess hooking into the profile edit process? Either way I couldn't figure out how to accomplish it. Any pointers towards a solution would be very much appreciated.
    • By Smirftsch
      I've got some odd problem adding additional styles to mystyles.js. After reading some and following the article here: https://github.com/ryancramerdesign/ProcessWire/blob/dev/wire/modules/Inputfield/InputfieldCKEditor/README.md#custom-editor-js-styles-set
      I was able to add a custom style. So far so good 😉
      It is displayed in the Styles menu and can be selected there. Now the odd thing starts, if I add a custom style like this:
       
      ... { name: 'Box Top', element: 'span',attributes: { 'class': 'box_top' } }, { name: 'Box Bottom', element: 'span', attributes: { 'class': 'box_bottom' } }  
      it works and can be selected just fine.
      However, if I add this:
      { name: 'Box Top', element: 'div',attributes: { 'class': 'box_top' } }, { name: 'Box Bottom', element: 'div', attributes: { 'class': 'box_bottom' } } It is also displayed, can be selected - BUT - once the edit is saved, it is gone, won't be displayed in the page and won't be shown anymore in the editor as selected style, it goes back to "normal".
       
      Can anyone give me a hint what I missed?
    • By Guy Incognito
      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.