Content Editor

Content Editor Overview

The WebEd Content Editor is a WYSIWYG-rich text editor which enables writing content directly inside of web pages or online applications.

Page Editor

Toolbar Icons

Icon Description
Page Editor View/Edit Source (allows you to view and edit the source code -normally used by advanced users familiar with HTML)
Page Editor Save content
Page Editor Clear content
Page Editor Preview page content
Page Editor Print the page content
Page Editor Insert page template into content
Page Editor Cut (to cut text or images)
Page Editor Copy (to copy text or images)
Page Editor Paste (to paste copied text or images)
Page Editor Paste from Word (removes Word formatting and allows you to paste directly from a word document).
Page Editor Paste plain text
Page Editor Undo (un-does the last command)
Page Editor Redo (re-does the previous command)
Page Editor Find text in the content
Page Editor Replace text in the content
Page Editor Select All (text and image) in content
Page Editor Spell checker in content
Page Editor Bold (bolds selected text)
Page Editor Italic (italics selected text)
Page Editor Underline (underlines selected text)
Page Editor Strikethrough (strike through selected text)
Page Editor Subscript (subscript selected text)
Page Editor Super Script (superscript selected text)
Page Editor Remove Format (remove format selected text)

Paragraph Formatting

Icon Description
Page Editor Numbering (creates numbered sentences & paragraphs)
Page Editor Bullets (creates bulleted sentences & paragraphs)
Page Editor Outdent (creates an indent on the right)
Page Editor Indent (creates an indent on the left)
Page Editor Block quote (Block quote selected paragraph)
Page Editor Insert new DIV into content
Page Editor Justify Left (lines text up on the left)
Page Editor Justify Centre (centres selected text)
Page Editor Justify Right (lines text up on the right)
Page Editor Justify Full (spreads text evenly over the line or paragraph of selected text)
Page Editor Jump the white space tab to the right
Page Editor Jump the white space tab to the left
Page Editor Set language for selected text

Insert media into content

Icon Description
Page Editor Insert font awesome (reference site: Font-Awesome)
Page Editor Insert an image into the content
Page Editor Insert flash into content
Page Editor Insert table into content
Page Editor Insert horizontal line into content
Page Editor Insert icon smiley into content
Page Editor Insert a special character into content
Page Editor Insert page break to printing
Page Editor Insert iframe into content
Page Editor Embed Youtube videos into content
Page Editor Insert curly bracket into content (1)

Other Features of the Toolbar

Icon Description
Page Editor Add style for image/text...etc... selected
Page Editor Heading format for selected text
Page Editor Fonts format for selected text
Page Editor Set fonts size for selected text
Page Editor Foreground Colour (allows you to choose or create a foreground colour or text colour)
Page Editor Background Colour (allows you to choose or create a background colour)
Page Editor Toggle full-screen editor
Page Editor Absolute Positioning. (allow you to absolutely position page elements)
Page Editor Get editor version information

The Default Toolbar

The Content Editor's Default toolbar contains icons for the most commonly used actions available to the user.

Page Editor
  • Source - used to switch to Source code view
  • Bold - used to make highlighted text bolded
  • Italic - used to make highlighted text italicized
  • Underline - used to make the highlighted text underlined
  • Subscript - used to make the highlighted text a subscript
  • Superscript - used to make the highlighted text a superscript
  • Remove text format - used to remove all formatting of the highlighted text
  • Ordered list (numbered list) - used to make the highlighted text an ordered/numbered list
  • Unordered list (bulleted list) - used to make the highlighted text an unordered/bulleted list
  • Block quote - used to make the highlighted text a block quote
  • Left align - used to make the highlighted text aligned left
  • Centre align - used to make highlighted text aligned centre
  • Right align - used to make the highlighted text aligned right
  • Justify - used to make the highlighted text aligned left and justified
  • Link - used to make the highlighted text a link, the Link window appears when clicked
  • Image - used to insert an image, the File Manager appears when clicked
  • YouTube video - used to insert a YouTube video, the Embed YouTube Video window appears when clicked
  • Table - used to insert a table, the Table Properties appear when clicked
  • iFrame - used to insert an iFrame, the Table Properties appear when clicked
  • Curly bracket - used to insert a curly bracket, the Select Curly Bracket window appears when clicked
  • Styles - if styles are present, the styles should appear in the dropdown which the user can apply to highlighted text
  • Format - used to apply the format to highlighted text
  • Text colour - used to apply colour to highlighted text
  • Text background - used to apply background colour to highlighted text
  • Maximize - brings the editor into full screen

Configuring the Default Toolbar

STEP-BY-STEP
  • 1
    Log in as an administrator and go to the Admin Dashboard.
    Learn how to log in here →
  • 2

    In the site admin, go to Settings > Toolbars

    Page Editor
  • 3

    From the Toolbar Management, click the Edit icon to the left of the "Default Toolbar"

  • 4

    On the Toolbar Management page, simply tick the checkbox next to the icon you want to show on your default toolbar. The changes you make shall appear on the preview instantly.

    Page Editor
  • 4

    Once you're done, click "Save" or "Save and Continue" at the bottom to stay on the page


Other Admin Functions

At the bottom of the editor, there are extensive functionalities available to content editors.

To view the detailed information of these features go to this page.

Page Editor