Sign in to follow this  
tpr

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:

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 6
  • Thanks 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
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Mustafa-Online
      CKEditor 5 v10.0.0 – the future of rich text editing looks stable
      .
       
    • By Rudy
      https://ckeditor.com/blog/CKEditor-5-v1.0.0-beta-released/
      Looks very clean. Hopefully we get to test it on PW soon.
       
    • By manuel1981
      Hey guys,
      I want to disable the crop and align features when placing an image into the CKEditor.
      The image should simply placed in a predefined width without any additional options.
      Can anybody help me with that?
      Thanks, Manuel
    • By MilenKo
      Hello guys. I feel a bit ashamed of this fact but I just needed to add an image with some text wrapped around it using CKEditor and I simply can't achieve that. I have an image field attached to the template (called images) and it is showing promptly the uploaded images. I am able to manipulate the image and I set its alignment to left side. Then I add some text and I can see in CKEditor that the text is properly surrounding the image. However, once I save the page and view it, it shows the text under the image or only a line is staying asside the image and the rest is under the image again. As far as the field used for the text (body) is set to TextMultiLang and I did not added any text formatters and chose the content type to be HTML/Markup.
      In my CSS I've added some of the PW styles for the alignement as per some posts here but that did not help either. Something I am missing again?
       
       
       
       
    • By Robin S
      I got tired of having to open the link dialog in CKEditor in order to check where a link is pointing to, so made this simple plugin.
      Link Hover
      A plugin for CKEditor. Shows the href attribute of a link in a tooltip when the link is hovered. This saves you from having to open the link dialog in order to check where a link points to.

      Installation
      This readme assumes installation in ProcessWire CMS.
      The plugin folder must be named "linkhover" – if necessary, rename the folder to remove the "-master" suffix added by GitHub. Copy the "linkhover" folder to /site/modules/InputfieldCKEditor/plugins/
      In the field settings for each CKEditor field that you want to activate the plugin for, check the "linkhover" checkbox at Input > Plugins > Extra Plugins
       
      https://github.com/Toutouwai/linkhover