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.
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
Step 2: Add a new file by clicking on the "Create a new Javascript file" button
Step 3: Give a name to your javascript, select the Type as "Local" and give it a priority depending on your other javascript file.
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)
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
The HTML selector needs to have an HTML tag and class
For example :
h1.ms-rteElement-Title
{ name: "Title 1"; }
Inline classes
.ms-rteStyle-button { 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; }