Rich Text Editor
The Rich Text Editor settings page is a list of concrete5 editor extensions and editor plugins for the rich text editor. Editor plugins allow you to add buttons to the editor toolbar, new context menus, and extra behaviors. By enabling and disabling editor extensions and plugins, you can tailor your editing experience to match your user and team requirements. concrete5 comes with a wide variety of editor plugins by default, but more can be added through the marketplace or developed as a package. In concrete5 version 8, the rich text editor is CKEditor 4.
There's quite a long list of extensions and plugins, so we're going to list them below and offer some extra information about what they do. The rich text editor plugins that come with the concrete5 core are default CKEditor plugins or based on them. For more information about a plugin, visit it's ckeditor.com plugin page.
- Enable file selection from file manager - allows the concrete5 file manager to be used to select files and images. It is enabled by default.
- Enable page selection from sitemap - allows the concrete5 sitemap to be used for selecting pages in a website. It is enabled by default.
- About - adds an "About CKEditor 4" editor toolbar button used to get the CKEditor version and licensing info.
- Auto Grow - when checked this option allows the editor to grow and shrink vertically depending on the amount of content in the editing area.
- Accessibility Help - when checked this option allows the display of the editor keymap information. Pressing Alt+0 in the editor displays the accessibility options.
- Basic Styles - this option adds the following buttons to the editor toolbar:
- BiDi (Text Direction) - adds text direction editor toolbar buttons that allows you to set the text direction at the block level (LTR or RTL). It does this by setting an HTML dir attribute.
- Blockquote - adds the "Block Quote" editor toolbar button for wrapping content in a blockquote HTML element.
- Clipboard - adds "Cut", "Copy", and "Paste" buttons to the editor toolbar.
- Color Button - adds the "Text Color" and "Background Color" buttons to the editor toolbar. These can be used to set inline text color and text background colors.
- Color Dialog - provides a dedicated color dialog window with a table of colors that can be chosen with your mouse and Hex color input.
- Context Menu - allows the editor context menu to be used instead of the native browser context menu. The native browser context menu will still be available when the Ctrl key is pressed when opening it.
- Div Container Manager - adds the "Create Div Container" editor toolbar button, dialog window, as well as context menu entries that let you manage the created div element container. This lets you create div elements within your content and add an ID, styles, and classes to them.
- Elements Path - when enabled this displays the element path to the current cursor position in the bottom of the article editor toolbar. This can be very useful for seeing which element you are editing inside.
- Enter Key - pressing the enter key in the editor adds a new paragraph (this behavior can be configured).
- Escape HTML Entities - this setting automatically converts HTML elements and other characters that can be problematic into HTML entities for safe storage and recall from the database.
- Find / Replace - adds the "Find" and "Replace" buttons to the editor toolbar and allows you to search for and replace text in the editor.
- Flash Dialog - adds the "Flash" button to the editor toolbar and is used to manage Flash embed options.
- Font Size and Family - adds the "Font" and "Size" drop-down menus to the editor toolbar. These can be used to set inline text font family and font size.
- Format - adds the "Format" drop-down menu to the editor toolbar. The Format drop-down menu is used to format text using HTML elements such as headings and paragraph.
- Horizontal Rule - adds the "Insert Horizontal Line" editor toolbar button and is used to add horizontal rule elements inside the editor.
- HTML Output Writer - controls HTML output formatting and configuration.
- Image - adds the "Image" editor toolbar button and is used to add images and manage image properties.
- Enhanced Image - adds the "Image" button to the editor toolbar. The Enhanced Image plugin is a simplified version of the Image plugin and supports captions, image alignment, and click and drag resizing of images.
- Indent Block - adds the "Decrease Indent" and "Increase Indent" buttons to the editor toolbar.
- Indent List - adds list indentation handling (when you use indent or outdent list items).
- Justify - adds the text justification buttons to the editor toolbar:
- "Align Left"
- "Align Right"
- Language - adds the "Language" button to the editor toolbar. It supports the "WCAG 3.1.2 Language of Parts" specification (without further configuration this is limited to only a few standard languages).
- List - adds the "Numbered List" and "Bulleted List" buttons to the editor toolbar.
- List Style - enables list property dialogs in list item context menus. It can be used to set list type (circle, square, dot for bulleted lists; lower/upper roman, lower/upper alpha for numbered lists) and start number (for numbered lists).
- Magic Line - makes it easier to add content and select content.
- Maximize - adds the "Maximize" button to the article editor toolbar. When clicked, the editor will maximize to fill the browser window. Clicking the button again will minimize the editor.
- New Page - adds the "New Page" button to the editor toolbar. When clicked, it clears the editing area.
- Page Break - adds the "Page Break" button to allow for page breaks in printing. When clicked it inserts the following code snippet:
- Paste As Plain Text - adds the "Paste as Plain Text" editor toolbar button. Using this removes any formatting information from text pasted from the clipboard. Ideal for copying content from HTML, web pages, or documents where you want to remove all formatting and embedded markup.
- Paste from Word - adds the "Paste from Word" button to the editor toolbar. Use this button when copying content from Word when you want to preserve formatting from the original Word document.
- Preview - adds the "Preview" button to the article editor toolbar that shows a preview of the content as it would be displayed to end users or printed.
- Remove Format - adds the "Remove Format" button to the editor toolbar which allows you to remove all text styling from selected text.
- SpellCheckAsYouType (SCAYT) - add the "Spell Check As You Type" button to the editor toolbar. It offers spell checking using webspellchecker.net. This plugin shows advertisements in the dialog window unless you purchase an add-free license.
- Select All - adds the "Select All" button to the editor toolbar and allows you to select the entire contents of the editor.
- Show Blocks - wraps all block level elements in a dashed outline and displays the element name.
- Show Table Borders - this option displays visible outlines around all table elements if the table does not have a border specified. If this is disabled, you cannot see the outline of tables that don't have borders.
- Insert Smiley - adds the "Smiley" button to the editor toolbar. Clicking this button brings up a dialog window filled with emojis.
- Source Editing Area - adds the 'Source' button to the editor toolbar and allows for HTML editing of editor content. This button is used to toggle between source view and content view.
- Source Dialog - allows for HTML editing of editor content in its own dialog window. If disabled, the source editor will be embedded in the editor window.
- Special Characters - adds the "Special Characters" button to the editor toolbar. Clicking this button brings up a dialog window filled with special characters from the extended character set.
- Styles Combo - used in combination with the concrete5 Styles plugin to a drop-down menu list of custom editor styles that have been defined in the theme.
- Tab Key Handling - adds basic Tab/Shift+Tab key handling to move to next/previous table cells, if within a table.
- Table - adds the "Table" button to the editor toolbar and allows for the insertion of tables and setting of basic table properties:
- table width and height
- cell padding and spacing
- table headers
- table border size
- alignment on page
- table caption and summary
- Table Resize - enables table column resizing by dragging column edges with your mouse.
- Table Selection - allows for selecting arbitrary rectangular table selections such as a few cells from different rows, a column (or a few of them), or a row (or multiple rows). You can apply formatting or add a link to all selected cells at once or cut, copy and paste entire rows or columns.
- Table Tools - enables the more advanced context menu for table items and cell properties and adds support for features such as:
- cell type
- cell width and height
- word wrap settings
- horizontal and vertical alignment
- row and column span
- cell and border color
- inserting and deleting cells, rows and columns
- merging and splitting cells horizontally and vertically.
* The advanced context menu is displayed by right-clicking inside a table.
- Undo - adds the "Undo" and "Redo" buttons to the editor toolbar. The default maximum undo and redo steps is 20, but this maximum can be configured through the concrete5 config.
- WebSpellChecker - adds a "Check Spelling" button to the editor toolbar. It offers spelling and grammar checking and thesaurus lookup using webspellchecker.net. This plugin shows advertisements in the dialog window unless you purchase an add-free license.
- concrete5 Link - this plugin is based on the CKEditor Link plugin and adds a "Link" button to the editor toolbar. In addition to the standard Link plugin features, it adds concrete5 sitemap page and file manager file selection and image lightbox creation.
- concrete5 Styles - this plugin is based on the CKEditor Styles Combo plugin and adds a "Styles" drop-down menu to the editor toolbar. The Styles drop-down menu lists custom editor styles that have been defined in the theme.
Default Editor Plugins
- Auto Grow
- Accessibility Help
- Basic Styles
- Color Dialog
- Context Menu
- Elements Path
- Enter Key
- Escape HTML Entities
- HTML Output Writer
- Indent Block
- Indent List
- List Style
- Magic Line
- Remove Format
- Show Blocks
- Show Table Borders
- Source Editing Area
- Source Dialog
- Styles Combo
- Tab Key Handling
- Table Resize
- Table Selection
- Table Tools
- concrete5 Link
- concrete5 Styles