Jump to content

Custom JS styles CKEditor


SamC
 Share

Recommended Posts

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:

ckeditor.thumb.png.43181d8a0ef50dc81eb7e12e48f6e711.png

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.

page-source.thumb.png.c2d980e304e8d75f000e16b8c0b3a5b5.png

Link to comment
Share on other sites

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

5926f553225d5_Screenshot2017-05-2516_16_07.thumb.png.b5e2fd4c1cb3fa89401d4929ccb595c0.png

...which outputs:

5926f555f0e27_Screenshot2017-05-2516_16_16.thumb.png.46246772281f6d9dd4d0a7c4e8fd4b9d.png

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.

  • Like 2
Link to comment
Share on other sites

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.

mystylesjs.thumb.png.d5173ef1da9bbf1e55321b9c5d62d3f3.png

 

Link to comment
Share on other sites

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

customstylesjs.thumb.png.37d854e50d235ed62b21e1b688fa1384.png

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

  • Like 2
Link to comment
Share on other sites

  • 8 months later...

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)

Link to comment
Share on other sites

  • 6 months later...

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.

 

  • Like 3
  • Thanks 2
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.
×
×
  • Create New...