Configure Rich Text Editor settings
Change Rich Text Editor (RTE) config settings
- Go to the Admin panel: Advanced section > Configuration settings page.
- Type rich in the Search config settings field to narrow the list of config settings.
- Find the config setting that you want to change in the Name column.
- Click in the Value column beside the config setting, and change the current value.
- 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.
- Go to the Admin panel: Advanced section > Configuration settings page.
- Type emoji in the Search config settings field to narrow the list of config settings.
- Find the config setting emoji.enabled in the Name column.
- Click in the Value column beside the config setting:
- Select the true radio button to enable emojis.
- Select the false radio button to disable emojis.
- 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.
Comments
0 comments
Please sign in to leave a comment.