Customize the "Rich Text" options

API & Customization Show & Tell
1

Having many options in the Rich Text editor is great, but sometimes you want to limit which options can be used. For example, let’s suppose that users should only be allowed to use Bold, Italic, and Links.

Before:

Screen Shot 2022-07-20 at 10.09.27 PM
Screen Shot 2022-07-20 at 10.09.27 PM1221×310 4.67 KB

After:

Screen Shot 2022-07-20 at 10.09.45 PM
Screen Shot 2022-07-20 at 10.09.45 PM1222×304 3.04 KB

You can customize this to your needs as you wish.

CSS:

/* 
  Customize the Rich Text options.

  HOW TO USE THIS
  1. Select a class from the list below.

  CLASSES
  html: .re-html
  formatting: .re-formatting
  bold: .re-bold
  italic: .re-italic
  strikethrough: .re-deleted
  font color: .re-fontcolor
  back color: .re-backcolor
  link: .re-link
  image weblink: .re-image_web_link
  video: .re-video
  table: .re-table
  unordered list: .re-unorderedlist
  ordered list: .re-orderedlist
  outdent: .re-outdent
  indent: .re-indent
  alignment: .re-alignment
  horizontal rule: .re-horizontalrule

  2. Copy and paste the class inside the parentheses, as seen below. 
  
  ul.redactor-toolbar li a:not(.re-bold) {
    display: none;
  }

*/ 
/* EXAMPLE: To show only Bold, Italic, and Link. */
ul.redactor-toolbar li a:not(.re-bold):not(.re-italic):not(.re-link) {
  display: none;
}

Enjoy.

5 Likes