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.