Jump to content

[solved] How to disable CKEditor's style preview in the dropdowns?


szabesz
 Share

Recommended Posts

Hi,

I've been searching for the answer but could only find some hacky "solutions" from the distant past.

What drives me crazy is the "preview" feature of the dropdown menus:

ckeditors-style-preview.jpg.261a116652f8ea2f0214417ee8e6ec06.jpg

Is it possible to force the dropdowns not to apply the styles of the editor but use the styles of the button of the editor, or at least use the default styles? I need readable menu items, not those cut-off an useless styled ones. Also, only a few menu items fit in the tiny dropdown area. This is bad UX :( 

  • Like 3
Link to comment
Share on other sites

I've been looking for a solution to that years ago, and it seems the answer hasn't changed :( What I use as a workaround is to add larger styling for the combos in question with AdminCustomFiles, applying width and height to div.cke_combopanel__format and div.cke_combopanel__styles.

  • Like 1
Link to comment
Share on other sites

How are the headings different sizes in the first place? Been searching through the ckeditor code and can't find anything that seems to control it. You can change the rendered label (Heading 1, Heading 2...), use custom classes for each item, change the html tag that gets output but damned if I can find the part that controls the font in the select list itself.

The format dropdown is a plugin which you can download and add to ckeditor. I can't find this plugin in my PW install so not sure how the format dropdown even exists on my body field.

  • Like 1
Link to comment
Share on other sites

14 minutes ago, BitPoet said:

applying width and height to div.cke_combopanel__format and div.cke_combopanel__styles.

I've been thinking of hacking it too but as a last resort. The trouble with such workarounds is obvious, when they change the names of the classes, we need to make changes too and I already use some of these admin overwrites. Thanks for the tip though, at least I know where to look at :) 

53 minutes ago, SamC said:

Might be useful but possibly only affects the output rather than the actual dropdown.

This is just the definition, I cannot see how this can "help".

Others were trying to solve this too, eg:

Link to comment
Share on other sites

7 minutes ago, SamC said:

I can't find this plugin in my PW install.

I did not add it ;) I just use the Input config of the TextArea inputfield:

Format Tags
Semicolon-separated list of selectable tags shown in the "format" dropdown.

Edited by szabesz
typo
Link to comment
Share on other sites

1 minute ago, szabesz said:

I've been thinking of hacking it too but as a last resort. The trouble with such workarounds is obvious, when they change the names of the classes, we need to make changes too and I already use some of these admin overwrites.

This is one of the few cases where I don't care that much since getting the new CSS selectors isn't difficult, so I just make sure to document these small UI hacks in a dedicated place in the admin area.

16 minutes ago, SamC said:

I can't find this plugin in my PW install so not sure how the format dropdown even exists on my body field.

The format and styles plugins (as well as some other basic widgets that are internally realized as plugins) are already included in the main ckeditor.js.

  • Like 2
Link to comment
Share on other sites

5 minutes ago, BitPoet said:

so I just make sure to document these small UI hacks in a dedicated place in the admin area.

I've been trying to do it too, for years :P not too much success so far, even though I know how useful it is because it always makes me very happy when I find that I did not forget to document something... 

Link to comment
Share on other sites

15 hours ago, szabesz said:
16 hours ago, BitPoet said:

applying width and height to div.cke_combopanel__format and div.cke_combopanel__styles.

I've been thinking of hacking it too but as a last resort. The trouble with such workarounds is obvious, when they change the names of the classes, we need to make changes too and I already use some of these admin overwrites. Thanks for the tip though, at least I know where to look at :) 

How are you overriding styles in the admin? Never done this before.

Link to comment
Share on other sites

8 minutes ago, SamC said:

How are you overriding styles in the admin? Never done this before.

As @BitPoet said, there is AdminCustomFiles module (I've never used it), and AdminOnSteroids module can do it too. Also in config.php something like this:

$config->scripts->add($config->urls->templates . "admin/admin_global.js");
$config->styles->append($config->urls->templates . "admin/admin_global.css");

A related good read: http://soma.urlich.ch/posts/custom-js-in-processwire-admin/

  • Like 2
Link to comment
Share on other sites

13 minutes ago, szabesz said:

As @BitPoet said, there is AdminCustomFiles module (I've never used it), and AdminOnSteroids module can do it too. Also in config.php something like this:

$config->scripts->add($config->urls->templates . "admin/admin_global.js");
$config->styles->append($config->urls->templates . "admin/admin_global.css");

A related good read: http://soma.urlich.ch/posts/custom-js-in-processwire-admin/

Awesome, thanks!

  • Like 1
Link to comment
Share on other sites

22 hours ago, szabesz said:

Is it possible to force the dropdowns not to apply the styles of the editor

In /site/modules/InputfieldCKEditor/contents.css:

.cke_panel_list h1, .cke_panel_list h2, .cke_panel_list h3, .cke_panel_list h4, .cke_panel_list h5, .cke_panel_list h6, .cke_panel_list pre, .cke_panel_list address { font-family:sans-serif, Arial, Verdana, "Trebuchet MS"; font-weight:normal; font-style:normal; font-size:14px; }

Do likewise for any custom styles you have added to the Styles dropdown.

2018-02-02_002924.png.ffaddd4a6d9a7889534d82a7cfee1e26.png

  • Like 4
Link to comment
Share on other sites

2 minutes ago, szabesz said:

Thanks Robin! Looks promising. Is there anything I need to do to make it load? So far no success, as this contents.css does not seem to be included this way, I cannot find it...

My bad... I already have that file but I named it differently, sorry for this :) I added the rules to the end of the css and it does the trick indeed. I just need to refine it a bit! Thank you!

Link to comment
Share on other sites

Thanks once more! I think I start with this one and see how it goes:

.cke_panel_list * {
    font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
    font-weight: normal;
    font-style: normal;
    font-size: 14px;
    margin: 0;
}
.cke_panel_listItem a {
    padding: 2px 7px;
}

padding: 2px 7px; makes the list more compact vertically.

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

×
×
  • Create New...