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 Antonio Iorio
      Hi guys, as I would need your support. I state to be a beginner and I met the application the day before yesterday for the first time.
      I'm creating a manga reading site using wiremanga and I need to know how I can incorporate altervista advertising. (this is my site if you could serve http://dgtread.altervista.org/)
      I have also modified some elements of both the .css and php files but despite saving they are not updated.
    • By Robin S
      If you've ever needed to insert links to a large number of files within CKEditor you may have found that the standard PW link modal is a somewhat slow way to do it.
      This module provides a quicker way to insert links to files on the page being edited. You can insert a link to an individual file, or insert an unordered list of links to all files on the page with a single click.
      CKEditor Link Files
      Adds a menu to CKEditor to allow the quick insertion of links to files on the page being edited.

      Features
      Hover a menu item to see the "Description" of the corresponding file (if present). Click a menu item to insert a link to the corresponding file at the current cursor position. The filename is used as the link text. If you Alt-click a menu item the file description is used as the link text (with fallback to filename if no description entered). If text is currently selected in the editor then the selected text is used as the link text. Click "* Insert links to all files *" to insert an unordered list of links to all files on the page. Also works with the Alt-click option. Menu is built via AJAX so newly uploaded files are included in the menu without the page needing to be saved. However, descriptions are not available for newly uploaded files until the page is saved. Installation
      Install the CKEditor Link Files module.
      For any CKEditor field where you want the "Insert link to file" dropdown menu to appear in the CKEditor toolbar, visit the field settings and add "LinkFilesMenu" to the "CKEditor Toolbar" settings field.
       
      http://modules.processwire.com/modules/cke-link-files/
      https://github.com/Toutouwai/CkeLinkFiles
    • By anttila
      Is it possible to get rid of these useless rel attributes? It's CKeditor's default. I don't understand why those are forced.
       

    • By Robin S
      An inputfield for displaying markup editable via CKEditor.
      The module is intended for use with the Form Builder module. Allows blocks of static text to be included within a form, which can be edited in the form settings using CKEditor.
      Usage
      Install the Markup CKEditor module.
      In the Form Builder module settings, add "MarkupCKEditor" to "Inputfield types to use with FormBuilder".
      In your form settings, add a new field of type "Markup CKEditor". Enter the text you want to show in this field using "Markup Text" on the "Details" tab.
      Screenshots


       
      http://modules.processwire.com/modules/inputfield-markup-ckeditor/
      https://github.com/Toutouwai/InputfieldMarkupCKEditor
    • By cappuccino
      Hello
      I'm trying to creat a widget and add it to ckeditor. I found this tutorial, but something I make wrong.
      First I downloaded this plugin (https://ckeditor.com/cke4/addon/widget). I extracted the downloaded plugin in site\modules\InputfieldCKEditor\plugins. Then I started with the simplebox tutorial. I added a new folder ("simplebox") in site\modules\InputfieldCKEditor\plugins and followed the steps in the tutorial. But I'm struggeling with the part "CKEditor Initialization". I selected "simplebox" and "widget" in the 'extra plugins' section of the field config, but there are no extra toolbar buttons. If I open the page with the textarea there is only a empty field (s. picture). Could you help me?