Jump to content

CKEditor Styles dropdown tips


tpr
 Share

Recommended Posts

A few usability tweaks and tips for the CKEditor "Styles" dropdown, which is by default not that user-friendly:

cke-styles-dropdown-before.png.0f41d7d531161cc6b085b564c51ad7b3.png

As you can see it's small and if you add custom items to it they may look awkward as they may inherit styles from their targets (a 3rem bottom margin in the screenshot above).

These are relatively easy to fix but you have to load your custom CSS files to two places (eg. with AdminOnSteroids): PW admin and CKEditor.

After loading the CSS/Js assets (see code below) the dropdown looks nicer and more usable:

cke-styles-dropdown.gif.acdb763b40a6d3e7016c6ccec832579d.gif

The screencap contains other features that you can achieve with the snippets below.

Code

CSS - CKEditor (contains demo styles too)

Spoiler

/* Styles to load in CKEditor */

.cke_panel_grouptitle {
  position: sticky;
  top: 0;
  z-index: 99;
}

html.cke_panel_container {
  scroll-behavior: auto;
}

html.cke_panel_container .cke_panel_listItem > a * {
    margin: 0 !important;
    font-size: 0.97rem !important;
}

p.no-space-after {
  margin-bottom: 0 !important;
}

p.small-space-after {
  margin-bottom: 0.5rem !important;
}

p.large-space-after {
  margin-bottom: 3rem !important;
}

[data-list-style] li {
  margin-bottom: 0.5rem;
}

[data-list-style="decimal-leading-zero"] {
  list-style-type: decimal-leading-zero;
}

[data-list-style="upper-roman"] {
  list-style-type: upper-roman;
}

[data-list-style="checkmark"] {
  color: inherit;
  list-style: none;
  padding-left: 1.25rem;
}

[data-list-style="checkmark"] li {
  position: relative;
}

[data-list-style="checkmark"] li::before {
  content: '\2714';
  position: absolute;
  left: -1.1rem;
}

 

CSS - admin

Spoiler

/* /site/templates/styles/admin.css */

.cke_combopanel {
    width: auto !important;
    max-width: 600px !important;
    height: 400px !important;
}

.cke_combo__styles > a > .cke_combo_text {
    width: auto !important;
    max-width: 240px !important;
}

 

JavaScript - CKEditor custom styles

Spoiler

// /site/templates/scripts/cke.js

var myStyles = [

    // BLOCK STYLES
    {name: 'Heading 1', element: 'h1'},
    {name: 'Heading 2', element: 'h2'},
    {name: 'Heading 3', element: 'h3'},
    {name: '2 column', element: 'div', attributes: {'class': 'col2'}},

    // INLINE STYLES
    {name: 'Button', element: 'a', attributes: {'class': 'button'}},
    {name: 'Button-outline', element: 'a', attributes: {'class': 'button-outline'}},

    // empty class prevents highlighting other "p" elements
    {name: 'Paragraph', element: 'p', attributes: {'class': ''}},
    {name: 'Paragraph: no space after', element: 'p', attributes: {'class': 'no-space-after'}},
    {name: 'Paragraph: small space after', element: 'p', attributes: {'class': 'small-space-after'}},
    {name: 'Paragraph: large space after', element: 'p', attributes: {'class': 'large-space-after'}},

    // OBJECT STYLES - visible only if the cursor is inside the corresponding element type in the editor
    {name: 'List: upper-roman', element: 'ol', attributes: {'data-list-style': 'upper-roman'}},
    {name: 'List: decimal leading zero', element: 'ol', attributes: {'data-list-style': 'decimal-leading-zero'}},
    {name: 'List: checkmark', element: 'ul', attributes: {'data-list-style': 'checkmark'}}
];

// add inline font-size from 12px to 48px
for(var i = 12; i <= 48; i++) {
    myStyles.push({name: 'text ' + i, element: 'span', attributes: {'style': 'font-size: ' + i + 'px;'}});
}

CKEDITOR.stylesSet.add('mystyles', myStyles);

 

P.s. in case you wonder whether the half-margin, no-margin stuff and font-sizes from 12px to 48px were real-life examples - yes, client request ? 

  • Like 8
  • Thanks 1
Link to comment
Share on other sites

  • 5 years later...
  • 1 year later...
14 hours ago, gRegor said:

This is great! I don't currently run AdminOnSteroids module, so I'm wondering what the easiest way to add this CSS to the admin area is?

You could always add your own stylesheet in /site/init.php like this:

$this->addHookAfter('ProcessController::execute', function (HookEvent $event) {
   $this->config->styles->append("/site/templates/css/adminstyles.css");
});

 

  • Like 2
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...