Custom JS styles CKEditor

[SamC]

I'm having some issues with CKEditor, tried following this:

...but nothing seems to change. I created the mystyles.js (exactly as the above link just to see what it does). My admin page looks like this:

When I go to edit a body field, nothing has changed. The JS is this:

CKEDITOR.stylesSet.add('mystyles', [
    // Block-level styles
    { name: 'Heading 1', element: 'h1'},
    { name: 'Heading 2', element: 'h2', attributes: { 'class': 'my-header'} },
    { name: 'Heading 3', element: 'h3'},
    { name: 'Introduction', element: 'p', attributes: { 'class': 'introduction'} },

    // Inline styles
    { name: 'Link button', element: 'a', attributes: { 'class': 'button' } },
    { name: 'Highlight', element: 'span', attributes: { 'class': 'highlight' } },

    // Object styles
    { name: 'Stretch', element: 'img', attributes: { 'class': 'stretch' } },
]);

Now I guess some of my confusion is I don't actually know where these options would even appear to be selected. For example:

 { name: 'Heading 2', element: 'h2', attributes: { 'class': 'my-header'} },

Does this mean there should be a class 'my-header' in the 'styles' dropdown? In any case, it's not there, or anywhere to be seen. Pretty confused. I don't usually customize CKEditor but in this case I need to be able to select a ul list, then apply a class of 'generic-list'. I need to be able to do this via the dropdowns in the editor, rather than in the source code. And when I finally get this into the source code via the dopdown, I have ACF to contend with once the page saves. Not having a great deal of luck on that, tried ul(*), ul{*}, ul[*], doesn't seem to allow anything. Def running out of patience here, muchos frustration, so I thought I'd see if anyone can help to get me through this with my eyeballs intact.

Thanks for any advice.

 

==EDIT==

The file is present and is being loaded.

[SamC]

Ok, got the class working now:

{ name: 'Generic List', element: 'ul', attributes: { 'class': 'generic_list'} }

So I create a standard list with the bullet list button, select it, then choose my custom style...

...which outputs:

Sweet!

And then I saved the page, and the class stayed there in the source, no ACF removal. CKEditor always strips stuff like this out when I add via source, but I guess using this custom file is instructing CKEditor to leave it alone.

[SamC]

It's not working again now for some reason. I tried something out, I deleted everything in:

/wire/modules/Inputfield/InputfieldCKEditor/mystyles.js

...but left the file there. Now when I go to the body field, my styles dropdown is empty even though I have my custom styles in:

/site/modules/InputfieldCKEditor/mystyles.js

...like so:

// mystyles.js
CKEDITOR.stylesSet.add( 'mystyles', [ 
    { name: 'Generic List', element: 'ul', attributes: { 'class': 'generic-list'} },
    { 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: 'Small', element: 'small' },
    { name: 'Deleted Text', element: 'del' },
    { name: 'Cited Work', element: 'cite' }
] );

I thought maybe a typo but I can't see anything wrong with it. Something is not right here, my file is not being used.

Viewing the source on the edit page shows me this:

"InputfieldCKEditor_body": {
        "baseHref": "/",
        "contentsCss": "/wire/modules/Inputfield/InputfieldCKEditor/contents.css",
        "extraAllowedContent": "",
        "extraPlugins": "pwimage,pwlink,sourcedialog",
        "removePlugins": "image,magicline",
        "toolbar": [
            [
                "Format",
                "Styles",
                "-",
                "Bold",
                "Italic",
                "-",
                "RemoveFormat"
            ],
            [
                "NumberedList",
                "BulletedList",
                "-",
                "Blockquote"
            ],
            [
                "PWLink",
                "Unlink",
                "Anchor"
            ],
            [
                "PWImage",
                "Table",
                "HorizontalRule",
                "SpecialChar"
            ],
            [
                "PasteText",
                "PasteFromWord"
            ],
            [
                "Scayt",
                "-",
                "Sourcedialog"
            ]
        ],
        "format_tags": "p;h1;h2;h3;h4;h5;h6;pre;address",
        "language": "en",
        "entities": false,
        "height": "20em",
        "stylesSet": "mystyles:/site/modules/InputfieldCKEditor/mystyles.js?nc=1495895634", // << yes, that's my file, so where are my styles?
        "customConfig": "/site/modules/InputfieldCKEditor/config-body.js?nc=1474392859"
    },

Anyone else having problems with this?

Thanks for any advice.

 

==EDIT==

After a fair bit of testing, changes in the styles dropdown only happen when I edit mystyles.js in the /wire/modules/Inputfield/InputfieldCKEditor/ folder.

My custom styles are ignored by the system. Do I have the correct path in my body field? This is on a subdomain, dev.mysite.com, but the relative path should be the same.

 

[SamC]

This works as expected:

/**
 * mystyles.js
 */
CKEDITOR.stylesSet.add( 'customstyles', [ 
    { name: 'Generic List', element: 'ul', attributes: { 'class': 'generic-list'} },
    { 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: 'Small', element: 'small' },
    { name: 'Deleted Text', element: 'del' },
    { name: 'Cited Work', element: 'cite' }
] );

Just didn't use 'mystyles'...

Still don't know why the 'mystyles' didn't work, but I can live with this

https://github.com/ryancramerdesign/ProcessWire/blob/dev/wire/modules/Inputfield/InputfieldCKEditor/README.md#custom-editor-js-styles-set

"The term mystyles is just something we made up, and you may use whatever keyword you like (as long as it's not mystyles!), but note you will have to use that same keyword in the file itself. In our example below, you will see where we used the term mystyles again. If you want to keep things simple, then  just stick with using mystyles."

[elabx]

Does anyone know if there is a way to enable styles configuration through the Inputfield settings, as a textarea configuration? That is, instead of calling the configuration mystyles.js from disk, actually call it from a field setting. Maybe enabling an extra config field through a hook abd faking a url??

I'm going through this trouble because I have  multiple sites sharing templates through Git and I'd like to enable specific styles to only some sites. (Another solution would be to just ignore files with .gitignore, but want to try solving it on the processwire side)

[tpr]

Perhaps you could use mystyles.php with JavaScript content type header and include site specific js files from there? I'm not sure if this would work though but there's a chance. 

[gmclelland]

I know this is an old thread, but since it looks unsolved I thought I would share what worked for me in case people are searching the forums.

Here are the steps I took:

1. renamed mystyles.js to customstyles.js located at site/modules/InputfieldCKEditor/customstyles.js
2. edited customstyles.js to change the text from mystyles to customstyles.... CKEDITOR.stylesSet.add( 'custom-styles', [
3. edit the field settings for the field to point to the new customstyles.js

The problem for me was that I needed to change the prefix as well from mystyles:/site/modules/InputfieldCKEditor/customstyles.js to customstyles:/site/modules/InputfieldCKEditor/customstyles.js

They have to match the file name.  Hope that helps someone.

 

[Jules Vau]

Thanks you @gmclelland yours tips works for me with ProcessWire 3.0.184.

Just i have written "customstyles" rather than "custom-styles" in step 2.

Maybe it will help someone.