Adding css classes to ckeditor

[theo]

1 hour ago, elabx said:

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.

Thank you. Can you please explain? 

[elabx]

2 minutes ago, theo said:

Thank you. Can you please explain? 

Every CKEditor field has a configuration field Custom Editor CSS File (regular mode), by default it is:

/site/modules/InputfieldCKEditor/contents.css

If you set this option in all your CKEditor fields, with the same path, they will share that css file.

https://github.com/processwire/processwire/blob/master/wire/modules/Inputfield/InputfieldCKEditor/README.md#custom-editor-css-file

[theo]

Yes, thank you. 

My question was, if I can share the file and still have some different CSS rules for different CKEditors.

But it is not a big problem if it is not possible. I will take a different CSS file for each editor then.

¡Gracias!

[elabx]

@theo Maybe I jumped ahead to help too fast, haha, ¡De nada! 

 

[szabesz]

21 hours ago, theo said:

if I can share the file and still have some different CSS rules for different CKEditors.

What if you use import?

https://developer.mozilla.org/en-US/docs/Web/CSS/%40import

Write your common rules in the imported file, import the this file first in each file assigned to a CKEditor, and write the custom rules following the import. If you try it out, please report the result. I've never tested it with CKEditor in ProcessWire  but I hope it works.

[theo]

@szabesz I will try this tomorrow.

I remember I've used this method before for a PageTableExtended and it worked.

Should work with CKEditor too.

Thank you.

[interrobang]

On 9.3.2018 at 11:28 AM, 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 can add custom classes to the body of the ckeditor iframe. In the field settings (Input Tab) insert this in the "Custom Config Options" field:

bodyClass: Inputfield_textarea1

If you need more flexibility you can also hook create a hook in your /sites/init.php to add multiple classes to all of your ckeditor fields:

wire()->addHookBefore('Field(inputfieldClass=InputfieldCKEditor)::getInputfield', function(HookEvent $event) {
    // do not show modified data on Field edit page
    if ($this->wire('process') != 'ProcessPageEdit') return;

    $field = $event->object;
    $page = $this->pages->get($this->input->get->id);
    $customOptions = $field->customOptions;
    $customOptions .= "\nbodyClass: template-{$page->template} page-{$page->id} field-{$field->name}";
    $field->customOptions = $customOptions;
});

 

[theo]

@interrobang Yes!

bodyClass: Inputfield_textarea1

Is exactly what I was looking for.

Thank you!

[theo]

On 10.3.2018 at 7:37 PM, szabesz said:

 If you try it out, please report the result. I've never tested it with CKEditor in ProcessWire  but I hope it works.

Btw. Yes it works. I use it like

@import url("../fonts/fonts.css");

Thank you.

[theo]

On 12.3.2018 at 10:59 AM, interrobang said:

You can add custom classes to the body of the ckeditor iframe. In the field settings (Input Tab) insert this in the "Custom Config Options" field:

bodyClass: Inputfield_textarea1

If you need more flexibility you can also hook create a hook in your /site/init.php to add multiple classes to all of your ckeditor fields:

 

 

The hook works great.

However, there is another option. In mode:

$config->advanced=true;

You can make customOptions of a field overridable per template.

[GirlsUGames]

You can simply include or apply custom CSS classes to elements with CKEditor 4 as a config option as follow:

config.allowedContent = true

or include it within already existing configs:

{
   language:"en",
   direction:"ltr",
   allowedContent: true
}

Hope this help