How To Enhance the Usability of the Sitecore Rich Text Editor

As a Sitecore developer, it’s important to think of the content authoring experience as an important part of the solution. Not only the components (layouts, sublayouts, renders, etc.) should be functional from a business perspective, but making them easy to use for authoring is great for flattening the learning curve, especially for newcomers to Sitecore.

A content author’s natural environment is split between the experience editor and Rich Text Editor, which serves as a WYSIWYG content creation playground. This blog post will focus on customizing Sitecore Rich Text Editor (RTE) button layout and CSS classes in the CSS dropdown.

One of the advantages of the Sitecore Rich Text Editor is that it is based on Telerik’s RadEditor, which comes in handy for customizing the UI. Customization can be done programmatically or by editing an xml file, depending on the elements and level of customization needed. For more information see the RadEditor documentation.

Button Layout Customization

The easiest way to customize the rendering order and layout of the RTE buttons is by editing ToolsFile.xml. This .xml file is located in the deployed Sitecore instance “..\Website\sitecore\shell\Controls\Rich Text Editor\ToolsFile.xml”. Under tool node you can add, remove, or rearrange the buttons that are rendered on the RTE. It’s best to group the buttons and order them in an intuitive way. A good starting point is to place them similar to familiar text editors (Google Docs, MS Word, etc.).

CSS Dropdown Customization

The most common way to populate the CSS dropdown is by defining the main style sheet CSS path: . This not only serves to populate the dropdown with all the CSS classes defined in the style sheet but also provides classes for rendering a preview of the HTML in design mode. From a content author perspective, there is a double edge usability concern in this approach: In design mode you get a nice WYSIWYG preview at the cost of having a massive amount of css classes in the css dropdown, making it difficult to pick a specific css class. Additionally, some of them don’t have a descriptive name and others don’t get added by the engine due to a bug in the Sitecore’s RadEditor.

So the aim is to provide a custom set of CSS classes to be populated on the RTE dropdown without compromising the design preview with a lack of decorating styles. One approach is to cherry-pick the CSS classes to show in the dropdown by specifying them in the ToolsFile under the classes XML node.

<root>
  <modules>
    <module name="RadEditorStatistics" dockingZone="Bottom" enabled="true" visible="false"/>
    <module name="RadEditorDomInspector" dockingZone="Module" enabled="true" visible="false" />
    <module name="RadEditorNodeInspector" dockingZone="Module" enabled="true" visible="false" dockable="false" />
    <module name="RadEditorHtmlInspector" dockingZone="Module" enabled="true" visible="false" />
  </modules>
  <tools name="MainToolbar" dockable="false" IsRibbon="true">
    <tool name="FindAndReplace" shortcut="CTRL+F"/>
    <tool name="Print" shortcut="CTRL+P"/>
    <tool separator="true"/>
    <tool name="Undo" shortcut="CTRL+Z"/>
    <tool name="Redo" shortcut="CTRL+Y"/>
    <tool separator="true"/>
    <tool name="Cut" shortcut="CTRL+X"/>
    <tool name="Copy" shortcut="CTRL+C"/>
    <tool name="Paste" shortcut="CTRL+V"/>
    <tool name="PasteFromWord" />
    <tool name="PasteFromWordNoFontsNoSizes" />
    <tool name="PastePlainText" />
    <tool name="PasteAsHtml"  />
    <tool name="FormatStripper"/>
    <tool separator="true"/>
    <tool name="Bold" shortcut="CTRL+B"/>
    <tool name="Italic" shortcut="CTRL+I"/>
    <tool name="Underline" shortcut="CTRL+U"/>
    <tool name="StrikeThrough" />
    <tool separator="true"/>
    <tool name="ForeColor"/>
    <tool name="BackColor"/>
    <tool separator="true"/>
    <tool name="ConvertToLower" />
    <tool name="ConvertToUpper" />
    <tool name="Subscript" />
    <tool name="Superscript" />
    <tool separator="true"/>
    <tool name="JustifyLeft" />
    <tool name="JustifyCenter" />
    <tool name="JustifyRight" />
    <tool name="JustifyFull" />
    <tool name="JustifyNone" />
    <tool separator="true"/>
    <tool name="InsertOrderedList" />
    <tool name="InsertUnorderedList" />
    <tool name="Outdent" />
    <tool name="Indent" />
    <tool separator="true"/>
    <tool name="InsertSitecoreLink"/>
    <tool name="InsertSitecoreMedia"/>
    <tool name="InsertSnippet" />
    <tool name="LinkManager" shortcut="CTRL+K"/>
    <tool name="Unlink" shortcut="CTRL+SHIFT+K"/>
    <tool name="InsertTable" />
    <tool name="InsertFormElement" />
    <tool separator="true"/>
    <tool name="InsertSymbol" />
    <tool name="InsertParagraph" />
    <tool name="InsertDate" />
    <tool name="InsertTime" />
    <tool separator="true"/>
    <tool name="MediaManager" />
    <tool name="FlashManager" />
    <tool separator="true"/>
    <tool name="InsertHorizontalRule" />
    <tool name="AbsolutePosition" />
    <tool name="ToggleTableBorder" />
    <tool name="ModuleManager" />
    <tool name="SpellCheck" shortcut="F7"/>
    <tool Name="XhtmlValidator" ></tool>
    <tool name="Help" shortcut="F1"/>
  </tools>
  <tools name="DropdownToolbar">
    <tool name="ApplyClass"/>
    <tool name="FormatBlock"/>
    <tool name="FontName"/>
    <tool name="FontSize"/>
    <tool name="Zoom" />
  </tools>
  <links>
  </links>
  <snippets>
  </snippets>
  <symbols>
    <symbol value="&#8212;" />
    <!-- em dash -->
    <symbol value="&#8211;" />
    <!-- en dash -->
    <symbol value="&#169;" />
    <!-- (c) -->
    <symbol value="&#174;" />
    <!-- (r) -->
    <symbol value="&#8482;" />
    <!-- tm -->
    <symbol value="&#36;" />
    <!-- dollar -->
    <symbol value="&#8364;" />
    <!-- euro -->
    <symbol value="&#163;" />
    <!-- pound -->
  </symbols>
  <classes>
    <class name="Button blue small" value=".editorbtnbluesmall"></class>
    <class name="Button blue small disabled" value=".editorbtnbluesmalldisabled"></class>
    <class name="Button aquamarine small" value=".editorbtnaquamarinesmall"></class>
    <class name="Button aquamarine small disabled" value=".editorbtnaquamarinesmalldisabled"></class>
    <class name="Button darkblue small" value=".editorbtndarkbluesmall"></class>
    <class name="Button darkblue small disabled" value=".editorbtndarkbluesmalldisabled"></class>
    <class name="Button cyan small" value=".editorbtncyansmall"></class>
    <class name="Button cyan small disabled" value=".editorbtncyansmalldisabled"></class>
    <class name="Button orange small" value=".editorbtnorangesmall"></class>
    <class name="Button orange small disabled" value=".editorbtnorangesmalldisabled"></class>
    <class name="Button gray small" value=".editorbtngraysmall"></class>
    <class name="Button gray small disabled" value=".editorbtngraysmalldisabled"></class>
    <class name="Button blue normal" value=".editorbtnbluenormal"></class>
    <class name="Button blue normal disabled" value=".editorbtnbluenormaldisabled"></class>
    <class name="Button aquamarine normal" value=".editorbtnaquamarinenormal"></class>
    <class name="Button aquamarine normal disabled" value=".editorbtnaquamarinenormaldisabled"></class>
    <class name="Button darkblue normal" value=".editorbtndarkbluenormal"></class>
    <class name="Button darkblue normal disabled" value=".editorbtndarkbluenormaldisabled"></class>
    <class name="Button cyan normal" value=".editorbtncyannormal"></class>
    <class name="Button cyan normal disabled" value=".editorbtncyannormaldisabled"></class>
    <class name="Button orange normal" value=".editorbtnorangenormal"></class>
    <class name="Button orange normal disabled" value=".editorbtnorangenormaldisabled"></class>
    <class name="Button gray normal" value=".editorbtngraynormal"></class>
    <class name="Button gray normal disabled" value=".editorbtngraynormaldisabled"></class>
    <class name="Button blue large" value=".editorbtnbluelarge"></class>
    <class name="Button blue large disabled" value=".editorbtnbluelargedisabled"></class>
    <class name="Button aquamarine large" value=".editorbtnaquamarinelarge"></class>
    <class name="Button aquamarine large disabled" value=".editorbtnaquamarinelargedisabled"></class>
    <class name="Button darkblue large" value=".editorbtndarkbluelarge"></class>
    <class name="Button darkblue large disabled" value=".editorbtndarkbluelargedisabled"></class>
    <class name="Button cyan large" value=".editorbtncyanlarge"></class>
    <class name="Button cyan large disabled" value=".editorbtncyanlargedisabled"></class>
    <class name="Button orange large" value=".editorbtnorangelarge"></class>
    <class name="Button orange large disabled" value=".editorbtnorangelargedisabled"></class>
    <class name="Button gray large" value=".editorbtngraylarge"></class>
    <class name="Button gray large disabled" value=".editorbtngraylargedisabled"></class>
    <class name="link" value=".link"></class>
    <class name="linkbold" value=".linkbold"></class>
    <class name="linkcomment" value=".linkcomment"></class>
    <class name="linkreply" value=".linkreply"></class>
    <class name="linkprogression" value=".linkprogression"></class>
  </classes>
  <fontNames></fontNames>
  <fontSizes></fontSizes>
  <colors></colors>
  <paragraphs></paragraphs>
  <dialogParameters></dialogParameters>
  <languages></languages>
  <contextMenus></contextMenus>
</root>

Here the “name” value corresponds to the desired display value and “value” to the actual name of the CSS class. Be aware that value cannot contain hyphens, space separations, or cascading CSS definitions such as “.class1 .class2” or “.class1 > .class2”. These restrictions might force you to implement different workarounds such as renaming or redefining the CSS classes.

A cleaner, but a bit cumbersome, way to handle this issue is to have a separate .css file with an alias for the desired classes. This .css must include the whole definition of the classes and either import the alias .css file into the main .css or include both .css files at runtime in the RTE loading.

/* BLUE*/
.editorbtnbluesmall{
    color: #fff !important;
    background-color: #005daa;
    border-color: #005daa;
    font-size: 1.125em !important;
    display: inline-block;
    min-width: 104px;
    padding: 10px 20px;
    border-radius: 4px;
    text-align: center;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;   
}
 
 
.editorbtnbluesmalldisabled{
    color: #fff !important;
    background-color: #005daa;
    border-color: #005daa;
    font-size: 1.125em !important;
    display: inline-block;
    min-width: 104px;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none !important;
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
    cursor: not-allowed;
    pointer-events: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}
 
.editorbtnbluenormal{
    color: #fff !important;
    background-color: #005daa;
    border-color: #005daa;
    font-size: 1.125em !important;
    display: inline-block;
    min-width: 104px;
    padding: 15px 30px;
    border-radius: 4px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
}
 
.editorbtnbluenormaldisabled{
    color: #fff !important;
    background-color: #005daa;
    border-color: #005daa;
    font-size: 1.125em !important;
    display: inline-block;
    min-width: 104px;
    padding: 15px 30px;
    border-radius: 4px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none !important;
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
    cursor: not-allowed;
    pointer-events: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}
 
.editorbtnbluelarge{
    color: #fff !important;
    background-color: #005daa;
    border-color: #005daa;
    font-size: 1.125em !important;
    display: inline-block;
    min-width: 104px;
    padding: 15px 60px;
    border-radius: 4px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
}
 
 
.editorbtnbluelargedisabled{
    color: #fff !important;
    background-color: #005daa;
    border-color: #005daa;
    font-size: 1.125em !important;
    display: inline-block;
    min-width: 104px;
    padding: 15px 60px;
    border-radius: 4px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
    cursor: not-allowed;
    pointer-events: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}
/* BLUE*/
 
/* aquamarine*/
.editorbtnaquamarinesmall{
    color: #fff !important;
    background-color: #00b199;
    border-color: #00b199;
    font-size: 1.125em !important;
    display: inline-block;
    min-width: 104px;
    padding: 10px 20px;
    border-radius: 4px;
    text-align: center;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;   
}
 
 
.editorbtnaquamarinesmalldisabled{
    color: #fff !important;
    background-color: #00b199;
    border-color: #00b199;
    font-size: 1.125em !important;
    display: inline-block;
    min-width: 104px;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none !important;
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
    cursor: not-allowed;
    pointer-events: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}
 
.editorbtnaquamarinenormal{
    color: #fff !important;
    background-color: #00b199;
    border-color: #00b199;
    font-size: 1.125em !important;
    display: inline-block;
    min-width: 104px;
    padding: 15px 30px;
    border-radius: 4px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
}
 
 
.editorbtnaquamarinenormaldisabled{
    color: #fff !important;
    background-color: #00b199;
    border-color: #00b199;
    font-size: 1.125em !important;
    display: inline-block;
    min-width: 104px;
    padding: 15px 30px;
    border-radius: 4px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none !important;
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
    cursor: not-allowed;
    pointer-events: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}
 
.editorbtnaquamarinelarge{
    color: #fff !important;
    background-color: #00b199;
    border-color: #00b199;
    font-size: 1.125em !important;
    display: inline-block;
    min-width: 104px;
    padding: 15px 60px;
    border-radius: 4px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
}
 
 
.editorbtnaquamarinelargedisabled{
    color: #fff !important;
    background-color: #00b199;
    border-color: #00b199;
    font-size: 1.125em !important;
    display: inline-block;
    min-width: 104px;
    padding: 15px 60px;
    border-radius: 4px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
    cursor: not-allowed;
    pointer-events: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}
/* aquamarine*/
 
/* darkblue*/
.editorbtndarkbluesmall{
    color: #fff !important;
    background-color: #002c44;
    border-color: #002c44;
    font-size: 1.125em !important;
    display: inline-block;
    min-width: 104px;
    padding: 10px 20px;
    border-radius: 4px;
    text-align: center;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;   
}
 
.editorbtndarkbluesmalldisabled{
    color: #fff !important;
    background-color: #002c44;
    border-color: #002c44;
    font-size: 1.125em !important;
    display: inline-block;
    min-width: 104px;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none !important;
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
    cursor: not-allowed;
    pointer-events: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}
 
.editorbtndarkbluenormal{
    color: #fff !important;
    background-color: #002c44;
    border-color: #002c44;
    font-size: 1.125em !important;
    display: inline-block;
    min-width: 104px;
    padding: 15px 30px;
    border-radius: 4px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
}
 
.editorbtndarkbluenormaldisabled{
    color: #fff !important;
    background-color: #002c44;
    border-color: #002c44;
    font-size: 1.125em !important;
    display: inline-block;
    min-width: 104px;
    padding: 15px 30px;
    border-radius: 4px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none !important;
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
    cursor: not-allowed;
    pointer-events: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}
 
.editorbtndarkbluelarge{
    color: #fff !important;
    background-color: #002c44;
    border-color: #002c44;
    font-size: 1.125em !important;
    display: inline-block;
    min-width: 104px;
    padding: 15px 60px;
    border-radius: 4px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
}
 
 
.editorbtndarkbluelargedisabled{
    color: #fff !important;
    background-color: #002c44;
    border-color: #002c44;
    font-size: 1.125em !important;
    display: inline-block;
    min-width: 104px;
    padding: 15px 60px;
    border-radius: 4px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
    cursor: not-allowed;
    pointer-events: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}
/* darkblue*/
 
 
/* cyan*/
.editorbtncyansmall{
    color: #fff !important;
    background-color: #4c9cef;
    border-color: #4c9cef;
    font-size: 1.125em !important;
    display: inline-block;
    min-width: 104px;
    padding: 10px 20px;
    border-radius: 4px;
    text-align: center;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;   
}
 
 
.editorbtncyansmalldisabled{
    color: #fff !important;
    background-color: #4c9cef;
    border-color: #4c9cef;
    font-size: 1.125em !important;
    display: inline-block;
    min-width: 104px;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none !important;
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
    cursor: not-allowed;
    pointer-events: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}
 
.editorbtncyannormal{
    color: #fff !important;
    background-color: #4c9cef;
    border-color: #4c9cef;
    font-size: 1.125em !important;
    display: inline-block;
    min-width: 104px;
    padding: 15px 30px;
    border-radius: 4px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
}
 
.editorbtncyannormaldisabled{
    color: #fff !important;
    background-color: #4c9cef;
    border-color: #4c9cef;
    font-size: 1.125em !important;
    display: inline-block;
    min-width: 104px;
    padding: 15px 30px;
    border-radius: 4px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none !important;
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
    cursor: not-allowed;
    pointer-events: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}
 
.editorbtncyanlarge{
    color: #fff !important;
    background-color: #4c9cef;
    border-color: #4c9cef;
    font-size: 1.125em !important;
    display: inline-block;
    min-width: 104px;
    padding: 15px 60px;
    border-radius: 4px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
}
 
 
.editorbtncyanlargedisabled{
    color: #fff !important;
    background-color: #4c9cef;
    border-color: #4c9cef;
    font-size: 1.125em !important;
    display: inline-block;
    min-width: 104px;
    padding: 15px 60px;
    border-radius: 4px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
    cursor: not-allowed;
    pointer-events: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}
/* cyan*/
 
/* orange*/
.editorbtnorangesmall{
    color: #fff !important;
    background-color: #ff8a29;
    border-color: #ff8a29;
    font-size: 1.125em !important;
    display: inline-block;
    min-width: 104px;
    padding: 10px 20px;
    border-radius: 4px;
    text-align: center;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;   
}
 
 
.editorbtnorangesmalldisabled{
    color: #fff !important;
    background-color: #ff8a29;
    border-color: #ff8a29;
    font-size: 1.125em !important;
    display: inline-block;
    min-width: 104px;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none !important;
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
    cursor: not-allowed;
    pointer-events: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}
 
.editorbtnorangenormal{
    color: #fff !important;
    background-color: #ff8a29;
    border-color: #ff8a29;
    font-size: 1.125em !important;
    display: inline-block;
    min-width: 104px;
    padding: 15px 30px;
    border-radius: 4px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
}
 
.editorbtnorangenormaldisabled{
    color: #fff !important;
    background-color: #ff8a29;
    border-color: #ff8a29;
    font-size: 1.125em !important;
    display: inline-block;
    min-width: 104px;
    padding: 15px 30px;
    border-radius: 4px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none !important;
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
    cursor: not-allowed;
    pointer-events: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}
 
.editorbtnorangelarge{
    color: #fff !important;
    background-color: #ff8a29;
    border-color: #ff8a29;
    font-size: 1.125em !important;
    display: inline-block;
    min-width: 104px;
    padding: 15px 60px;
    border-radius: 4px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
}
 
 
.editorbtnorangelargedisabled{
    color: #fff !important;
    background-color: #ff8a29;
    border-color: #ff8a29;
    font-size: 1.125em !important;
    display: inline-block;
    min-width: 104px;
    padding: 15px 60px;
    border-radius: 4px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
    cursor: not-allowed;
    pointer-events: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}
/* orange*/
 
 
/* gray */
.editorbtngraysmall{
    color: #000 !important;
    background-color: #F5F4F1;
    border-color: #F5F4F1;
    font-size: 1.125em !important;
    display: inline-block;
    min-width: 104px;
    padding: 10px 20px;
    border-radius: 4px;
    text-align: center;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;   
}
 
 
.editorbtngraysmalldisabled{
    color: #000 !important;
    background-color: #F5F4F1;
    border-color: #F5F4F1;
    font-size: 1.125em !important;
    display: inline-block;
    min-width: 104px;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none !important;
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
    cursor: not-allowed;
    pointer-events: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}
 
.editorbtngraynormal{
    color: #000 !important;
    background-color: #F5F4F1;
    border-color: #F5F4F1;
    font-size: 1.125em !important;
    display: inline-block;
    min-width: 104px;
    padding: 15px 30px;
    border-radius: 4px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
}
 
.editorbtngraynormaldisabled{
    color: #000 !important;
    background-color: #F5F4F1;
    border-color: #F5F4F1;
    font-size: 1.125em !important;
    display: inline-block;
    min-width: 104px;
    padding: 15px 30px;
    border-radius: 4px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none !important;
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
    cursor: not-allowed;
    pointer-events: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}
 
.editorbtngraylarge{
    color: #000 !important;
    background-color: #F5F4F1;
    border-color: #F5F4F1;
    font-size: 1.125em !important;
    display: inline-block;
    min-width: 104px;
    padding: 15px 60px;
    border-radius: 4px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
}
 
 
.editorbtngraylargedisabled{
    color: #000 !important;
    background-color: #F5F4F1;
    border-color: #F5F4F1;
    font-size: 1.125em !important;
    display: inline-block;
    min-width: 104px;
    padding: 15px 60px;
    border-radius: 4px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-transition: all 0.5s ease !important;
    transition: all 0.5s ease !important;
    cursor: not-allowed;
    pointer-events: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}

For a multisite configuration - or for a more CI friendly approach - the new definition of the ToolsFile should be added in the project and referenced in runtime whenever the RTE launches. Below is a code example of how this can be done.

namespace AwesomeProject.Common.CustomConfigurations
{
    public class CustomEditorConfiguration : EditorConfiguration
    {
        public CustomEditorConfiguration(Item profile) : base(profile)
        {
        }
        protected override void SetupStylesheets()
        {
             
            SetToolsFile(); //ToolsFile path should be set first.
            SetStyleSheets();
        }
        private void SetToolsFile()
        {
            var path = @"/rte/CustomToolsFile.xml";
            if (!string.IsNullOrEmpty(path))
            {
                Editor.ToolsFile = path;
            }
        }
        private void SetStyleSheets()
        {
            var cssPaths = new string[]
                {
                    @"/css/stylesheet.css",
                    @"/css/aliasStylesheet.css"
                };
            foreach (var style in cssPaths)
            {
                Editor.CssFiles.Add(style);
            }
            base.SetupStylesheets();
        }
    }
}

By setting your main .css and the alias .css, the RTE renders a nice preview of the HTML while the dropdown shows only the CSS classes defined in CustomToolsFile.xml. This workaround is a bit harder to maintain from the frontend side but is worth it if the goal is to provide the best experience possible for content authoring.