CKEditor remove all style and tags from combopanel (dropdown)

Question

I use a custom CSS stylesheet for CKEditor and want to disable the preview of all styles and format tags on the dropdowns, and just display the name in a div for example. Right now CKEditor create the corresponding tag with the class to style a preview. (like on the screenshot) :

If in the dropdown there is a h2 tag it will display it under block elements in a h2 tag. It make the dropdown inherit the whole site style for h2 tags.

I can do this by adding rules for the specific dropdown but was wondering is there is a built in configuration to stop that in a more generic way. Maybe to force it to always use simple span or div. To have just a classic dropdown, no groups, no style added.

Thanks for your help.

Thanks

Atzmon Atzmon · Accepted Answer · 2017-01-18T14:36:46

This is a bit of a brute force approach but you can override the list item style .cke_panel_listItem with some relevant children selectors in the content.css file.

In this example I'm controlling the display style of h1, h2, h3 and div items in the list:

.cke_panel_listItem h1,
.cke_panel_listItem h2,
.cke_panel_listItem h3,
.cke_panel_listItem div {
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: normal !important;
    color: #000000 !important;
    background-color: #ffffff !important;
    border: none !important;
 }

The original style definitions (such as those defined in ckeditor's styles.js file) will still be applied to the selected text, but the dropdown menu itself will display the labels using simple 12px text.

CKEditor remove all style and tags from combopanel (dropdown)

1 Answers