Rich Text Editor Settings
There are a number of settings available for the rich text editor that allow you to customize it for each individual website.
The settings can be accessed by clicking on Settings and then Rich Text Editor in the top navigation.
If you make any changes to the editor settings then you must reload any currently open administrator pages that use the editor to have the settings applied.
TinyMCE Rich Text Editor Settings
The select menu here allows you to pick which version of the rich text editor you want to use. It is highly recommended that you leave the selector on TinyMCE V4, the current version of the rich text editor. Most of the settings on this page only apply to the V4 version of the editor.
General Settings
From the General settings, you have the availability to change 3 defaults.
Paste as “plain text” by default
Allows you to decide whether you want the text to be pasted as plain text, thus removing any formatting, or to paste with the original formatting of the text. By default this is disabled.
Show the editor context menu on “right mouse click”
Activates or deactivates the editor context menu when you right-click your mouse. By default, this is enabled.
Security Settings
Allow content editors to include script tags with the page content and to add Javascript attributes (like "onclick") to links, images, and buttons
Changes whether or not <script> tags are allowed within the editor content. It will also affect whether or not Javascript attributes like "onclick" are allowed on button, image or link tags. By default this is disabled.
For security reasons it is recommended to set this to "No". If you copy and paste content from another website then it's possible to be exposed to XSS attacks.
Add rel="noopener noreferrer" to links that open in a new window/tab (i.e. target="_blank")
Adds "noopener noreferrer" to the rel attribute value for the link if the target attribute is "_blank". See Site Security settings to configure how other links within BranchCMS are handled.
This is a security feature that prevents the target="_blank" vulnerability. It is strongly recommended to leave this set to "Yes".
If the URL for the link is to content within your website then the "noopener noreferrer" values will not be added to the link.
Note that best practices are to not force links to open in a new window/tab.
The target="_blank" vulnerability has also been called Tabnabbing and it occurs when the attacker uses window.opener.location.assign() to replace the background tab with a malicious document.
When the rel attribute contains noopener then the new/other page cannot access your window object via window.opener. Internet Explorer and some other older browsers don't support rel="noopener" so you also need to use rel="noopener noreferrer". The "noreferrer" value for the rel attribute tells the browser to not collect any referrer information when the link is followed.
The noopener and noreferrer values do not affect SEO. The noreferrer value can affect analytics, which is why BranchCMS does not add that value to links within the same website.
Below are some resources to learn more about the target="_blank" vulnerablity.
- About rel=noopener - what problems does it solve - a good explanation of the vulnerabilty and what can be done about it.
- The performance benifits of rel=noopener
- The target="_blank" vulnerabilty by example
- What is the difference between "nofollow" and "noreferrer" link from SEO perspective?
- Performance and security of target=_blank links with rel=noopener
Image Settings
Under the Image Settings section, you have the availability to change three settings related to images.
Show image title field when adding/editing images
Allows you to set an image’s title text (for the title image tag attribute). This is not the same as the image description. By default, this is turned off to avoid confusion.
Show the advanced tab when adding/editing images
Allows you to disable or enable the advanced tab when adding or editing an image. By default, this is enabled.
Show the image dimensions when adding/editing images
Allows you to disable or enable the image dimensions fields. If they are turned off then you won’t see or be able to edit the image dimensions. By default, this is enabled.
Text Formatting Toolbar Buttons
The text formatting toolbar buttons are additional buttons that can be added to the editor. By selecting "Yes" in their dropdown menus they can be activated in the rich text editor. They are all “No” by default.
We strongly recommend leaving the text formatting options set to "No". It is not best practice to put inline text styles individually on a page. You should use the CSS Class Names options below to setup style options for users to pick from or simply use the text styles in your stylesheets.
Use the "background color" toolbar button
Activates the Background Color button on the toolbar. This button allows the user to change the background color of the selected text.
Use the "font color" toolbar button
Activates the Font Color button on the toolbar. This button allows the user to change the color of the selected text.
Use the "font family" toolbar button
Activates the Font Family button. This button allows the user to change the font type of the selected text.
Use the "font size" toolbar button
Activates the Font Size button. This button allows the user to change the size of the selected text.
New Lines
This section tells the software whether to use a paragraph tag <p></p> whenever the Enter keyboard button is pressed or to use the <br> tag. The option for a paragraph tag is preferred.
Note that you can press Shift+Enter to have a single line break <br>.
Link Rel Values
This section allows the user to add more values for the Rel menu for links. More can be added by clicking Add Another Link Rel button.
The Title text is what shows in the Rel menu. The Rel value is the actual value that gets set for the rel link tag attribute.
Link Target Values
You can add more link target values to guide how a link is opened by adding a title and target value into the fields. More can be added by selecting the Add Another Link Target button.
The Title text is what shows in the Target menu. The Target value is the actual value that gets set for the target link tag attribute.
CSS Styles
You can include the styles from your website into the editor so that the styles match as you are working on your content. There are two ways that you can do that:
- Import specific stylesheets
- Enter specific styles in the "Custom CSS styles" field.
Importing specific stylesheets is a cleaner option and it allows the styles that get pulled into the editor to always match your website even when you make changes to those stylesheets.
You can import stylesheets that are local to your website or external stylesheets like ones from Google Fonts.
Import Stylesheets
Enter the path for each stylesheet that you want to import into the editor in the File path field. You can include another stylesheet by clicking the Add Another Stylesheet link. The order that you have the stylesheets is the order that they will be imported.
Custom CSS Styles
You can add custom css styles to the editor so that the content in the editor can match the actual site. Just enter the styles to use in the editor into the text box.
You can also reference one more more stylesheets using the @import directive.
For example, if your stylesheet is located at /layout/css/main.css you can use the following:
@import url(/layout/css/main.css);
If you import a stylesheet then it’s possible that some of the core styles for the editor are overwritten. We recommend that you add the following styles:
html,
body {
background: transparent;
body {
margin: .75em !important;
}
Using the example stylesheet above the full styles to add to the Custom CSS styles field would be:
@import url(/layout/css/main.css);
html,
body {
background: transparent;
}
body {
margin: .75em !important;
}
Or, you can simply use the Import stylesheets option, which is much cleaner and easier.
CSS Class Names
Here you can create CSS class names for different types of elements. You can add more classes by clicking Add Another Class at the bottom of every type.
If one or more classes are setup then the Styles button will show in the editor.
For each of the different Classes the Title value is the text that will show in the Styles menu. The Class name is the actual class value added to the class attribute.
You can specify more than one class in the Class name field. Just separate each one with a space (i.e. classOne classTwo).
Do not include the period “.” in front of the class names.
Block Element Classes
These classes will show up in the Styles dropdown in the editor and can be applied to different block elements.
Set a comma-separated list of block level HTML tag names that the class will apply to in the Tag(s) Class Applies to field. If no tags are set then the class will not be used.
Examples could be:
p
p,div
h1,h2,h3
Image Classes
These classes will show up in the Styles dropdown and can be applied to the selected image. They will also show in the Class field when adding/editing an image.
Inline Classes
These classes will show up in the Styles dropdown and can be applied to the selected text. The selected text will be wrapped in a <span> tag.
Link Classes
These classes will show up in the Styles dropdown and can be applied to the selected link. They will also show in the Class field when adding/editing a link.
Table Classes
These classes will show up in the Styles dropdown and can be applied to the selected table. They will also show in the Class field when editing table properties.
Table Column Classes
These classes will show up in the Styles dropdown and can be applied to the selected table column. They will also show in the Class field when editing column properties.
Table Row Classes
These classes will show up in the Styles dropdown and can be applied to the selected table row. They will also show in the Class field when editing row properties.
Legacy CSS Styles
This is a leftover field from the old editor. It is left so that you may copy and paste the classes into the Custom CSS styles field or to use with the different Classes. TinyMCE V4 does not use any styles from this field.
