Editor

The standard WYSIWYG editors in concrete5 are Redactor (version 7) and CKEditor (version 8)

CKEditor


CKEditor is a ready-for-use HTML text editor designed to simplify web content creation.

Top Row

  • Left Buttons

    • Source  (toggle to view and edit html source)
    • Save (saves the current changes in the editor to the page: does not save page)
    • Cancel (cancels any of the current changes and takes the block out of edit mode)
  • Right buttons

    • Cut  (removes the highlighted elements and places them on the clipboard)
    • Copy (copies the highlighted elements to the clipboard but does not remove them)
    • Paste (pastes the current clipboard contents into the editor at the cursor point)
    • Undo (undoes the most recent command)
    • Redo (redoes a the most recent command that has been undone)

Second Row

  • Left Buttons

    • Bold  (makes selected text bolder by adding <strong></strong>)
    • Italic (italicises selected text by adding <em></em>)
    • underline (underlines selected text by adding <u></u>)
    • strikethrough (puts a line through selected text by adding <s></s>)
    • Subscript (lowers and decreases size  of selected text by adding <sub></sub>)
    • Superscript(raises and decreases size of selected text by adding <sup></sup>)
    • Remove Format (removes formatting tags around selected elements)
  • Next buttons

    • Insert/Remove Numbered list (Toggle a list where each item is numbered using <ol></ol>)
    • Insert/Remove Bullet list (Toggle a list where items have bullet points using <ul></ul>)
    • Decrease Indent (adds a -40px margin to the selected element - left or right dependent on text direction)
    • Increase Indent (adds a +40px margin to the selected element - left or right dependent on text direction)
    • Align Left (left aligns selected element(s) left by using  style="text-align:left")
    • Center (center aligns selected element(s) by using  style="text-align:center")
    • Align Right (right aligns selected element(s) by using  style="text-align:right")
    • Justify (increases space between words to fill area by using  style="text-align:justify")
  • Link Buttons

    • Link (adds a link to selected element(s) using <a href=""></a>)
    • Unlink (removes link from selected elements)
    • Anchor (adds an anchor link to an element)
  • Right Buttons

    • Image (adds an image and allows you to specify advanced image properties)
    • Table (adds an html table and dailog for editing its properties)
    • Snippets (allows selection of pre-defined html snippets for specific purposes)

Third Row

  • Style Buttons

    • Formatting Styles (allows you to select inline or block level style classes added to the theme)
    • Paragraph Format (select heading, paragraphs)
    • Font Name (select from a list of pre-defined fonts to change the text font face by using style="font-family:")
    • Font Size (select a font size by using style="font-size")
    • Text Color (change the text color by using style="color;#" )
    • Background Color (change the text background color by using style="background-color:#")
    • Show Blocks (puts an outline around the blocks and a label with the element type)

Configuring the Rich Text Editor

The section above shows the standard default editor toolbar that is installed with Concrete5.  

In addition, it is possible to change and add other editing functionalities and behaviours via the dashboard.

We do this by going to the System & Settings Page in the dashbard:

rich-text-editor-1.png

 

From there we select the 'Rich Text Editor' page in the 'Basics' section.

 

rich-text-editor-2.png  

The 'Rich Text Editor' settings page is a list of settings within the editor that either add buttons to the toolbar, new context menus or extra behaviours.  Checking or unchecking the box next to any of these and clicking the save button enables or disables them immediately in the rich text editor and the changes will become available on next use.

 

rich-text-editor-3.png 

There's quite a large list of these options so we're going to list them below and give some extra information on what they do.

Concrete5 Extensions

You're unlikely to ever want to uncheck these

  • Enable File Selection from file manager: allows the Concrete5 file manager to be used when selecting links, images etc
  • Enable page selection from sitemap:  allows the Concrete sitemap to be used for selecting links to pages in the website

Editor Plugins

  • About:  adds a button to the toolbar to show version and licensing info for ckeditor
  • Auto Grow: when checked this option allows the editor to expand and shrink vertically depending on the content in the editing area
  • Accessibility Help: when switched on this 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:
    • 'bold'
    • 'italic'
    • 'underline'
    • 'strikethrough'
    • 'subscript'
    • 'superscript' 
  • BiDi;  adds a button that allows you to set the text-direction at block level (LTR - RTL)
  • Blockquote:  adds a button for block level quotation in content using <blockquote></blockquote>
  • Clipboard: enables use of the clipboard for pasting content into the editor
  • Color Button:  adds the following buttons to the editor:
    • 'text color'
    • 'background color'
  • Color Dialog:  provides a dedicated 'select color' dialog window with a table of colors that can be chosen with your mouse (this option gives you a greater colour palette to choose from and the ability to use hex values).
  • Context Menu: provides the editor's context menu to use instead of the browser's native menu in place. 
  • Div Container Manager: adds the 'create div container' toolbar button and dialog window as well as context menu entries that let you manage the created <div> container.  With this you can create divs within your content and add styles and classes from your theme to those divs from within the editor.
  • Elements Path: when enabled this displays the list of html elements surrounding the current cursor element, can be very useful for seeing at a glance which element you are editing inside
  • Enhanced Image:  enabling this adds the following:
    • options for integrated image captions
    • an option to align images
    • the ability to resize images in the editor
      * but it removes some of the advanced properties that are present in the standard image editor.
  • Enter Key:  pressing the enter key in the editor adds a new paragraph (this behaviour can be variously configured but is an expert level task)
  • 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 in the toolbar and allows you to search the text in the editor and replace words in the text.  There are options to match case, all-caps and replace all instances of particular text with other text
  • Flash Dialog:  adds the 'flash dialog' button to manage flash embed parameters (scale, quality, alignment, background color etc)
  • Font Size and Family:  enables the 'font-size' and 'font-family' buttons in the toolbar from where you can change the size and family of the font inline
  • Format:  adds the 'format' dropdown for html text formats such as headings, paragraph etc.
  • Horizontal rule:  adds a button to add a horizontal rule <hr> inside the editor
  • HTML output writer: allows us to set specific html output rules for Concrete5
  • Image: adds the 'image' toolbar button to add images and manage all image properties via the dialog window
  • Indent Block: adds the 'indent' and 'outdent' buttons to the toolbar
  • Indent List: adds list indentation handling (when you use indent or outdent in lists).  When this is switched on using the indent will nest the list a further level, using outdent will remove the nesting a level at a time all the way out to replacing the list item with a <p>.
  • Justify: Adds the text justification buttons to the toolbar
    • 'left-align'
    • 'center-align'
    •  'right-align'
    •  'justify'
  • Language: implements the 'language' toolbar button to support the WCAG 3.1.2 'Language of Parts' specification (without further configuration this is limited to only a few standard languages)
  • List: adds the 'list' buttons to the toolbar
  • List Style: enables numbered list properties dialogs.  Using this you can set list type (circle, square, dot for bulleted list, lower/upper roman, lower/upper alpha for numbered list), start number (for numbered list).  When inside a list using right-click will show these extra formatting options
  • Magic Line: puts outlines around elements and makes them easier to select
  • Maximize:  this does not work in the Concrete5 integration due to the way Concrete5 uses blocks and areas.
  • New Page: do not enable or use this as it does not integrate correctly with Concrete5 and pressing it will lose your content.
  • Page Break:  adds the 'page break' button to allow for page breaks in printing.  This adds <div style="page-break-after: always"><span style="display: none;">&nbsp;</span></div>.
  • Paste as Plain Text:  adds the 'paste as plain text' toolbar button.  Using this removes any formatting information, links etc from text pasted from the clipboard.  Ideal for copying content from html, webpages or documents where you want to remove all formatting and embedded markup.
  • Paste from Word: adds the' paste from Word' button to the toolbar.  Use this button when copying content from word where you want to preserve formatting, links from the original word document.
  • Preview:  this does not work inside Concrete5
  • Remove format:  adds the 'remove format' button to the toolbar which allows you to remove all text styling from selected text
  • SpellCheckAsYouType (SCAYT): this plugin is not compatible with the Concrete5 integrated editor but the alternative Webspellchecker plugin does work.
  • Select All: adds the 'select all' button to the toolbar allowing you to select the entire contents of the editor
  • Show Blocks: surrounds all block level elements with an 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 unchecked you cannot see the outline of tables that don't have borders.
  • Insert Smiley:  adds a button to the toolbar to select a smiley from a dialog window
  • Source Editing Area: adds the 'source' button to the toolbar and allows direct editing of html in the editor. This button is used to toggle between source view and wysiwyg view.
  • Source Dialog: this allows for the raw html editing to be edited in its own dialog window (if you turn this option off the source editor will be embedded in the editor window rather than pop out).
  • Special Characters:  this adds the 'special characters' button to the toolbar.  Clicking this button brings up a dialog window full of special characters from the extended character set)
  • Styles Combo:  this adds the 'styles' dropdown selector to the editor which allows you to set styles to block, inline and object elements
  • Tab Key handling: provides tab/shift+tab key handling - (tab = next element / shift+tab = previous element)
  • Table: this adds the insert table button to the toolbar and allows the insertion of tables and setting of basic table properties:
    • rows/columns
    • table width & height
    • cell padding and spacing
    • table headers
    • table border size
    • alignment on page
    • table caption and summary
  • Table resize: this behaviour allows you to grab column edges with your mouse and drag to resize them
  • Table Tools:  enables the more advanced context menu for table items and cell properties and adds support for features:
    • cell type
    • cell width & 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 pulled up by right-clicking inside a table.
  • Undo:  adds the 'undo' and 'redo' buttons to the toolbar (you can undo or redo the last 20 commands)
  • WebSpellChecker:  adds the 'spell check' button to the toolbar, using this brings the text up and performs a spell check using webspellchecker.net, you can select from different dictionaries and there is grammar checking and thesaurus functionality, this plugin does show adsense ads in the dailog window unless you purchase an add-free license.
  • Concrete5 link:   adds the concrete5 link selection behaviour
  • Concrete5 styles: adds functionality for concrete5 styles added via the theme
Loading Conversation