Change Rich Text Editor (RTE) config settings

1. Go to the Admin panel: Advanced section > Configuration settings page.
2. Type rich in the Search config settings field to narrow the list of config settings.

   

3. Find the config setting that you want to change in the Name column.
4. Click in the Value column beside the config setting, and change the current value.
5. Click Save.

Customize tools on the Rich Text Editor toolbar

You can customize the tools available to your users in the Rich Text Editor toolbars based on the needs of your organization. Toolbars can be customized separately for desktop and mobile applications. In both cases, there are individual config settings for the RTE toolbars for: 1) page body and admin screens, 2) page summary, and 3) comment box and forms.

To customize the RTE toolbars on your intranet, copy and paste some or all of the supported tools in the heading below into the Value column of the appropriate ThoughtFarmer admin panel config setting. You can reorder the tools as desired. Add "/" to start a new row in the toolbar. Remember to surround the entire config setting value with square brackets [ ] and click Save.

See the heading Rich Text Editor configuration settings below for a list of available configuration settings with their default values. 

Available tools

Listed below are all of the available tools that can be added to the RTE configuration settings. They are in a format that can be inserted into the value column of the config settings.

{"name":"formatting","items":["Format","Font","FontSize"]},
{"name":"colors","items":["TextColor","BGColor"]},
{"name":"links","items":["LinkBrowser","Unlink","LinkTarget"]},
{"name":"insert","items":["EmojiPanel","ImageBrowser","WebImage","ImportDocument","InsertCode","SharePointDocumentLibrary","Wufoo","TableSelector","Table","Smiley","PageBreak","Iframe"]},
'/',
{"name":"history","items":["Undo","Redo"]},
{"name":"basicstyles","items": ["Bold","Italic","Underline","Strike","Subscript","Superscript","RemoveFormat"]},
{"name":"paragraph","items":["JustifyLeft","JustifyCenter","JustifyRight","JustifyBlock","BidiLtr","BidiRtl"]},
{"name":"indenting","items":["Indent","Outdent","HorizontalRule"]},
{"name":"lists","items":["NumberedList","BulletedList","Blockquote","CreateDiv"]},
{"name":"forms","items": ["Form","Checkbox","Radio","TextField","Textarea","Select","Button","HiddenField"]},
{"name":"editing","items":["Find","Replace","SelectAll"]},
{"name":"clipboard","items":["Cut","Copy","Paste","PasteText","PasteFromWord"]},
{"name":"source","items":["Source","Templates"]},
{"name":"maximize","items":["Maximize"]},
{"name":"about","items":["About"]}

Rich Text Editor configuration settings

For desktop

• Page body and admin screens: richTextEditor.advanced.buttons
  • Default tools: Format, font, font size, text color, background color, insert link, remove link, insert link target, insert image, emoji, insert web image, import document, insert code, insert SharePoint document library, insert Wufoo, insert table, undo, redo, bold, italic, underline, strikethrough, remove formatting, alignment left/center/right, increase indent, decrease indent, insert horizontal line, numbered list, bulleted list, source, maximize screen
• Page summary: richTextEditor.summary.buttons
  • Default tools: Format, font, font size, text color, background color, insert link, remove link, insert image, emoji, insert web image, insert table, undo, redo, bold, italic, underline, strikethrough, remove formatting, alignment left/center/right, increase indent, decrease indent, insert horizontal line, numbered list, bulleted list, source
• Comment box and forms: richTextEditor.basic.buttons
  
  • Default tools: Text color, background color, insert link, undo, bold, italic, underline, alignment, increase indent, decrease indent, numbered list, bulleted list, insert image, emoji, insert web image, insert code, source

For mobile app and mobile browser

Default settings should display the page body/admin screen and page summary RTE toolbars on one row on smaller devices. 

• Mobile page body and admin screens: richTextEditor.mobile.advanced.buttons
  • Default tools: Format, bold, italic, remove formatting, numbered lists, bulleted lists, insert link
• Mobile page summary: richTextEditor.mobile.summary.buttons
  • Default tools: Format, bold, italic, remove formatting, numbered lists, bulleted lists, insert link
• Mobile comment box and forms: richTextEditor.mobile.basic.buttons
  • Default tools: Text color, background color, insert link, undo, bold, italic, underline, remove formatting, alignment, increase indent, decrease indent, emoji, insert image, insert web image, insert code, source

Enable or disable emojis

If this setting is enabled, an icon appears in the RTE controls allowing users to add emojis to their content or comments. Emojis can also be added in these areas and other areas that don't use the RTE (like Activity card comments and Shout-outs) by typing a colon ":" and then typing to search for the desired emoji.

1. Go to the Admin panel: Advanced section > Configuration settings page.
2. Type emoji in the Search config settings field to narrow the list of config settings.
3. Find the config setting emoji.enabled in the Name column.
4. Click in the Value column beside the config setting:
   1. Select the true radio button to enable emojis.
   2. Select the false radio button to disable emojis.
5. Click Save.

Select fonts and font colors available in RTE

To learn more, see Specify available fonts and font colors.

Enable in-page linking

When the config setting richTextEditor.inPageContentLinksEnabled is set to True, a new icon appears to the right of the Insert link/Unlink icons that allows users to create link target IDs in the page. Users can then create links in the page that will link to the place/heading they have set as a link target.

Configure inserted image height and width

Default image insertion height and width (in pixels) can be adjusted using the config settings richTextEditor.insertedImageHeight and richTextEditor.insertedImageWidth.

Configure enter key behavior

The "Enter" key can be configured to insert a new line break when the config setting richTextEditor.newLineBr is set to true. When false, the "Enter" key will insert a new paragraph with a non-breaking space.

Add custom CSS file to editor content

You can add custom CSS files to the content area of the editor. To do this, use the richTextEditor.custom.css config setting. Add paths, relative or absolute, to custom CSS files, separated by a comma.