Adding css classes to ckeditor

[MuchDev]

Hey all. I'm having a derp moment I think. Where is the option to add in css classes to ckeditor? I would like to be able to set an image class to stretch or have alternate heading options in my textboxes. 

Thanks in advance

[adrian]

On the field's input tab you can define a css file under "Custom Editor CSS File", although that option is only for Inline Mode, although that is what I tend to use most of the time these days anyways.

Just quickly, this (http://ckeditor.com/forums/CKEditor-3.x/include-custom-css-ckeditor) might be relevant for regular mode.

[Fokke]

Hi!

Look for Custom Editor JS Styles Set in the field configuration and enter a path for .js file.

In this file you can define your custom styles like this:

CKEDITOR.stylesSet.add('mystyles', [
    // Block-level styles
    { name: 'Heading 1', element: 'h1'},
    { name: 'Heading 2', element: 'h2'},
    { 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' } },
]);

Also make sure you have Styles toolbar item enabled.

[MuchDev]

Hey thanks guys, thank you for dumbing it down for me . I am trying to juggle this project in the middle of midterms / finals and trying to find what I was looking for in the midst of that documentation was stressing me out. Alright, sub sub project done, worked perfect! 

[Mont]

@Fokke Thank you!  Great post.  I was looking in all the wrong places until I read your post. 

[houseofdeadleg]

Hmm, maybe it's just me but I've followed the instructions and I still can't get this to work. Ive been through it about 4/5 times and still no joy.

[mr-fan]

Error messages - steps - output....something more than it don't work would be helpfull.

I always use CKE with custom format and style elements - i use custom css for look and feel and custom js for the setup of the items ...

regards mr-fan

[houseofdeadleg]

Steps taken are exactly as described in the instructions. If there were any errors I would've posted them. I've been through it, I've also been though it with 2 of our IT guys and they can't see why it's not working either. 

Update: I've been trying to add the styles to the 'body' field, with no success. As soon as I tried adding them to a different field, voila, it works. I've gone back and tried the body field again but it still doesn't work. Possibly caching?

[JasonS]

Steps taken are exactly as described in the instructions. If there were any errors I would've posted them. I've been through it, I've also been though it with 2 of our IT guys and they can't see why it's not working either. 

Update: I've been trying to add the styles to the 'body' field, with no success. As soon as I tried adding them to a different field, voila, it works. I've gone back and tried the body field again but it still doesn't work. Possibly caching?

I had the same problem, make sure you have styles enabled and the path to your js in the body field.

Instructions can be found on here.

.

[Robin S]

Update: I've been trying to add the styles to the 'body' field, with no success. As soon as I tried adding them to a different field, voila, it works. I've gone back and tried the body field again but it still doesn't work. Possibly caching?

For PW 2.x it's difficult to avoid caching problems for your linked CKEditor JS and CSS files. One solution, albeit tedious, is to append a cachebusting query string to your URLs and update it every time you change the files.

So in your field settings something like:

/site/modules/InputfieldCKEditor/contents.css?2

This has been fixed in one of the PW 3.x releases.

[Macrura]

this doesn't really work anymore:

Error: [CKEDITOR.resourceManager.add] The resource name "mystyles" is already registered.

something somewhere needs to change in terms of the instructions;

i followed those exact instructions (Instructions can be found on here.)

[Robin S]

54 minutes ago, Macrura said:

this doesn't really work anymore

"mystyles" is working normally for me in the latest PW 3.0.28. Where do you see the error message - in your browser JS console?

The error sounds like there is an attempt to load "mystyles" twice. Just guessing here - do you have anything in the "Custom Config Options" for the CKEditor field that refers to mystyles?

[Macrura]

no, I just followed the instructions exactly and it didn't work, that error is on the JS console.

i changed all of the references to a different word and it works, but certainly something seems up, this is a vanilla 3.0.25 body field...

[Robin S]

The settings for the CKEditor field are viewable in the page source of Edit Page:

You could inspect the source to see where any other references to "mystyles" might be coming from.

[Macrura]

thanks for that brain jiggle @Robin S

Doh - just figured it out - the other dev on this project added a 2nd body field which somehow by default loads 'mystyles'

[Mike Rockett]

Is there no way one can add styles to the default list? I'm trying to add a style for unordered lists, and the Styles list just shows up with the defaults only...

In /site/modules/InputfieldCKEditor/config-content.js (content field):

CKEDITOR.stylesSet.add('default', [{
    name: 'Ticked List',
    element: 'ul',
    attributes: {
        'class': 'light-emphases',
    },
}]);

 

[Mike Rockett]

Okay, landed up using a custom style set, and realised that one needs to actually click on the "ul" tag in the status bar in order to correctly select the list and apply the style.

[MilenKo]

Hello all. I am also trying to modify the default CKEditor styling for "ol" tag as I am testing the uikit framework, so in order to apply the proper styling, I need to click on the ol tag in the status bar so that I can select the list properly and apply the css. Does anyone has a better idea for an approach, as to a non-tech user, this might be a bit confusing and I am more aiming at a custom button or else that would allow me to select a few lines of text and would turn them in ul/ol with the custom styling:

<ol class="ol-pretty uk-list-large">

 

[SamC]

On 28/11/2017 at 1:32 AM, MilenKo said:

Hello all. I am also trying to modify the default CKEditor styling for "ol" tag as I am testing the uikit framework, so in order to apply the proper styling, I need to click on the ol tag in the status bar so that I can select the list properly and apply the css. Does anyone has a better idea for an approach, as to a non-tech user, this might be a bit confusing and I am more aiming at a custom button or else that would allow me to select a few lines of text and would turn them in ul/ol with the custom styling:

<ol class="ol-pretty uk-list-large">

 

If you go the 'modify ckeditor' route, as you say, you need to create the list (i.e. select the text, then click the list button in ckeditor), then select the list again, then use the 'Styles' dropdown to apply the classes. I find this a bit convoluted.

If you are using less to compile uikit, you could always try extend. I use this in sass a lot, the syntax is different with less, but something like this:

.wrapper-for-ckeditor-field {
  ol {
    &:extend(.ol-pretty);
    &:extend(.uk-list-large);
  }
}

i.e. just style out any ol within .wrapper-for-ckeditor-field (which would be in your template). No need for applying classes via ckeditor.

This wont work for you if you need:

a) Different styled lists within the outer class
b) You're not compiling less

Just an idea. I don't like messing around with ckeditor, find it quite infuriating, but sometimes you have to.

[MilenKo]

Thank you @SamC So far I have not yet touched Less or Sass, but was quickly reviewing it and it seems like a pretty cool (almost a must) for my needs if I need to have some flexibility etc.

Will see the SASS and try to compile it as I also do not like tinkering with CKEditor but more like learning how to create my own button etc. For example, if I want to have an accordion, button or else. And yes, I know there are tons of mods already, but I am trying to learn to make one custom.

[SamC]

@MilenKo I'd go with Less if you're using uikit as you can make your own theme. Maybe you can do this with the Sass version but I didn't bother trying as there doesn't seem much point being stuck knowing just one or the other. You can get comfortable enough with both then you're free to choose whatever framework you want, or write some stuff yourself from scratch, whatever suits you best.

Once it's set up, it's not that difficult, and they give you a build script too so you're literally up and running in about 5mins. Then you just override variables, hook existing stuff (like cards, accordians etc...) and add your own custom rules. All compiles to a nice minified CSS file which you can then link to from your webpage.

I'm starting a new guide about Uikit on my tutorials site as I've found the uikit instructions to be lacking in detail and an absolute beginner to css pre-processing would have a tough time with it. The guide will serve as a base for when I get round to writing about customizing the PW admin theme, which will be easy once someone has read the first guide.

[MilenKo]

@SamC It would be SUPERB if I can find some more info about Uikit. I found tons of mods to enable bootstrap with CKEditor but there is not much info in regards to Uikit and its custom styling and approaches. I feel like it is related to the mobile Uikit platform that is found in every Google search. Anyway, my goal is to learn frameworks and see them in symbiosis with ProcessWire. For now, I am using a pre-made HTML themes to get myself familiar with the structures etc. as I do not have much time to learn both while working and taking care of my kids, wife etc. So slowly and gradually I am adding some.

In my first attempt with ProcessWire I started a Knowledge Sharing profile that has been completed using BootStrap (Premium) theme. Now I got another theme that is simpler but fits better my needs and is Uikit based. That is why I am expanding the theme with custom toolbars etc. Right now, I am reordering my toolbars to fit my idea of the editor, so once I am OK with it would share if a need is for those, that would need it

[MilenKo]

Hey guys, I know this might fall a bit off the topic, but in CKEditor, how would you call for the toolbar to be moved to a new line under the first one? In the official documentation it is said to use:

'/', // Line break - next group will be placed in new line.

So I tried using '/' as well as just /, but I am still seeing the toolbar extended until the end of the text box size and only after that it starts the new row. Anything I am missing here?

[theo]

Hello

Is there a way to share an editor.css for several CKEditor fields and make a difference for each? (talking about backend only)

I tried sth like this:

.Inputfield_textarea1 h1 {
  text-transform:uppercase;    
}

Meaning I want to uppercase h1 only for textarea1.

But this doesn't work.

I know I can write a separate css file for each CKEditor, but it would be easier this way.

Thank you.

[elabx]

6 hours ago, theo said:

Hello

Is there a way to share an editor.css for several CKEditor fields and make a difference for each? (talking about backend only)

I tried sth like this:

.Inputfield_textarea1 h1 {
  text-transform:uppercase;    
}

Meaning I want to uppercase h1 only for textarea1.

But this doesn't work.

I know I can write a separate css file for each CKEditor, but it would be easier this way.

Thank you.

You don't have to write a different file for different field, you cant point the all to the same file. Though you do have to configure each one.