MuchDev

Adding css classes to ckeditor

Recommended Posts

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? 

Share this post


Link to post
Share on other sites
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

  • Like 1

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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

 

  • Like 2

Share this post


Link to post
Share on other sites
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.

  • Like 3

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites
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;
});

 

  • Like 3
  • Thanks 1

Share this post


Link to post
Share on other sites
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.

  • Like 1

Share this post


Link to post
Share on other sites
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.

pwoverrd.png.951f5d588a9308a24e620d6afa4b560e.png

  • Like 1

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.