Jump to content

CKEditor Styles dropdown tips

Recommended Posts

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


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:


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


CSS - CKEditor (contains demo styles too)


/* 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


/* /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


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

var myStyles = [

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

    {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 7
  • Thanks 1

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Roberts R
      I never though about it before but when I insert image into CKeditor field I don't get ALT tag filled from image that has it. Do I have to do it manualy for inserted image or Im doing something wrong?
    • By Robin S
      If you've ever needed to insert links to a large number of files within CKEditor you may have found that the standard PW link modal is a somewhat slow way to do it.
      This module provides a quicker way to insert links to files on the page being edited. You can insert a link to an individual file, or insert an unordered list of links to all files on the page with a single click.
      CKEditor Link Files
      Adds a menu to CKEditor to allow the quick insertion of links to files on the page being edited.

      Hover a menu item to see the "Description" of the corresponding file (if present). Click a menu item to insert a link to the corresponding file at the current cursor position. The filename is used as the link text. If you Alt-click a menu item the file description is used as the link text (with fallback to filename if no description entered). If text is currently selected in the editor then the selected text is used as the link text. Click "* Insert links to all files *" to insert an unordered list of links to all files on the page. Also works with the Alt-click option. Menu is built via AJAX so newly uploaded files are included in the menu without the page needing to be saved. However, descriptions are not available for newly uploaded files until the page is saved. There is an option in the module config to include files from Repeater fields in the edited page. Nested Repeater fields (files inside a Repeater inside another Repeater) are not supported. Installation
      Install the CKEditor Link Files module.
      For any CKEditor field where you want the "Insert link to file" dropdown menu to appear in the CKEditor toolbar, visit the field settings and add "LinkFilesMenu" to the "CKEditor Toolbar" settings field.
    • By Guy Incognito
      Hi all,
      Having a strange problem with my CKeditor custom styles.
      Trying to add standard bootstrap classes to the image alignment options. But for some reason if I add multiple classes to the centred image option it disappears from the editor drop down. But with only one class it works.
      So this works:
      { name: 'Left Aligned Photo', element: 'img', attributes: { 'class': 'float-md-left img-fluid' } }, { name: 'Right Aligned Photo', element: 'img', attributes: { 'class': 'float-md-right img-fluid' } }, { name: 'Centered Photo', element: 'img', attributes: { 'class': 'img-fluid' } }, But this doesn't:
      { name: 'Left Aligned Photo', element: 'img', attributes: { 'class': 'float-md-left img-fluid' } }, { name: 'Right Aligned Photo', element: 'img', attributes: { 'class': 'float-md-right img-fluid' } }, { name: 'Centered Photo', element: 'img', attributes: { 'class': 'w-100 img-fluid' } }, Note the slight difference to the last line.
      I've tried escaping the hyphens in case it was that but doesn't help.
      Any ideas.... #puzzled!
    • By iipa
      I have a CKEditor Textarea in a page template. Some users like to add text in them by pasting from Word document. This leads to internal server error when saving page. When using paste without formatting (cmd + shift + V), page is saved normally, so I assume error has something to do with Word's hidden characters that cause issues in many other programs as well. (I don't have Word myself, so I debugged this with video chat with user. I forgot to ask to check code view, so I'm not sure if they are visible there.)
      Is there a way in ProcessWire/PHP to sanitize Textarea input from these hidden characters, or can I prevent this by changing editor settings (listed below, if it helps)? I don't like leaving error handling rely to user action - somebody always forgets to do things specific way and it weakens user experience.
      Textarea formatting: none (htmlspecialchars off) field type: CKEditor content type: markup/html experimental markup/html settings: all on acf: on html purifier: on additional purify settings: all on extra allowed content: none add-ons: pwimage, pwlink, sourcedialog sourcedialog settings: none disabled add-ons: image, magicline  
    • By Gadgetto
      is it possible to configure CKEditor to have syntax highlighting enabled in Source and/or Sourcedialog? Coming from MODX i had this feature enabled and now I'm trying to find a solution for PW too.
      I'd like to have both the WysiWyg Editor and the Source editor with syntax highlighting enabled in on field.
      Andy plugins to achieve this?
  • Create New...