Froala RTE - How to customize the Modern Rich Text Editor with Powell Manager

Table of contents

New to Powell Manager? Click here for the full product overview. 

Introduction

The new Rich text editor is based on the Froala editor which brings a lot of features and customization.

mceclip0.png

 

It's displayed for all Note fields with rich text.

 

Define the options displayed in the component

As you see in the previous screen, a lot of options are available by default. But if you want to define your own you can insert a custom javascript that will override the configuration.

To do so, you need to follow step by step the next action.

Step 1: Go to manager in the javascript catalog section

mceclip0.png

 

Step 2: Add a new file by clicking on the "Create a new Javascript file" button mceclip1.png

Step 3:  Give a name to your javascript, select the Type as "Local" and give it a priority depending on your other javascript file.

mceclip2.png

Step 4: Include the following javascript file with all the options you want to define or override

 

(function(window, undefined) {
window.customFroalaConfig = {
colorsText: ["#1366eb", "#1aed76", "#f00e29", "#ebe010"],
fontFamily: { "Segoe UI Bold": "Bold" }
};
})(window);

 

You can find the entire list of options provided by the plugin here: https://froala.com/wysiwyg-editor/docs/options/

Compatibilities with standard Sharepoint styles (publishing)

From the manager and for your publishing sites you can define some custom style editors (that will appear also in the SharePoint standard editor)

 

mceclip3.png

Style classes

The modern rich text editor is also compliant with this feature and the following list of styles :

  • rteForeColor
  • rteBackColor
  • rteFontFace
  • rteFontSize
  • rteTable

To give you an example this code will add a "Main color style" in the "Style" part of the modern RTE :

.ms-rteForeColor-1 
{

-ms-name: "Main color";
color : #fffff;
}

This one will add some additional style to your table:

.ms-rteTable-1 
{

-ms-name: "Table 2";
border-width: 0px;
border-style: none;
font-size: 14px;
line-height: 1.5;
border-collapse: separate;
border-spacing: 8px 0;
font-weight: normal;
  background: transparent;
}

.ms-rteTable-1 th
{

text-align: left;
font-size: 16px;
line-height: 1.5;
border-bottom: 2px solid #d3dbe9;
  padding: 5px;
}

.ms-rteTable-1 td
{

text-align: left;
font-size: 14px;
line-height: 1.5;
border-bottom: 1px solid #d3dbe9;
  padding: 5px;
}

.ms-rteTable-1 th:last-child,
.ms-rteTable-1 td:last-child
{

  text-align: right;
}

.ms-rteTable-1 th:first-child,
.ms-rteTable-1 td:first-child
{

  text-align: left;
}

Element or block classes

These kinds of styles are displayed in the style list below :
mceclip0.png

The HTML selector needs to have an HTML tag and class

<tagHTML>.classCustom { -ms-name: "Display Name" }
 

For example :

h1.ms-rteElement-Title 
{
-ms-name: "Title 1"; }
 

Inline classes

These kinds of styles are displayed in the style list below :
mceclip2.png
Same as element or block classes except that you don't need to add the tag HTML.
 
For example : 
.ms-rteStyle-button {
    -ms-name: "Button";
    display: inline-block;
    margin: 0;
    min-width: 0;
    border: 0 none;
    text-decoration: none;
    border-radius: 0px;
    cursor: pointer;
    padding: 10px;
    font-family: "Regular", "Helvetica Neue", Helvetica, Verdana, sans-serif;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    box-sizing: border-box;
    transition: color 0.2s;
}
 
 
Was this article helpful?
0 out of 0 found this helpful