Skip to main content

WYSIWYG CKEditor

Updated

CKEditor is a third party WYSIWYG tool integrated into versions 8.2 and later.  It is available to use in HTML Templates and in Articles when enabled for your Profile.  

NOTE: It is important to include all HTML code between HTML tags.  If you switch between using the WYSIWYG editor and the code editor view, the CKEditor will try to intelligently correct the HTML code.  For instance, if you add template tags outside of the <HTML> tags, the CKEditor will attempt to move the code between the <HTML> tags.

Accessing the CKEditor

  1. Go to CONTENT >  TEMPLATES
  2. Click ADD.
  3. Enter a Name and Subject. 
  4. Click the HTML tab.
  5. Click TOGGLE VIEW to activate the WYSIWYG Editor.

Format Text with WYSIWYG

  1. In the Edit Template HTML tab, highlight the text to edit.
  2. Using the drop-down menus and font formatting buttons along the top of the editor, make changes as needed
  3. Click SAVE to save the changes.

Insert or Edit an Image

  1. In the Edit Template HTML tab, click in the Template area where the image should be inserted, or click on an existing image to be replaced.
  2. Click the 'Image' button along the top of the editor
  3. Enter or replace the URL on the 'Image Info' tab with the path to the appropriate image
  4. Enter any of the following optional settings
    • Alternative Text: For display when images are hidden
    • Enter image Width and Height
    • Border: Enter a 0 (zero) for no border or an integer value such as 1 for a thin border or 5 for a thick border
    • HSpace: Enter an integer value for space to the left and right of the image in relation to what is around it
    • VSpace: Enter an integer value for space above and below the image in relation to what is around it
    • Alignment: Select  'Left' or 'Right' to force text to wrap around that side of the imag
  5. Click OK to insert image or apply changes.
  6. Click image and drag in the editor to move it.
Insert a Hyperlink
  1. In the Edit Template HTML tab, highlight the text to hyperlink
  2. Click the 'Link' button
  3. Enter a URL in the textbox without the protocol (e.g. mysite.com not http://mysite.com)
  4. Enter items on the TARGET and ADVANCED tabs as desired
  5. Click OK.
Insert an Anchor Link
  1. In the Edit Template HTML tab, highlight the text, image, or space to turn into an anchor.
  2. Click the 'Anchor' button.
  3. Enter a (one word) Anchor Name.
  4. Click OK.
  5. Highlight the text to hyperlink to the anchor.
  6. Click the 'Link' button.
  7. From the 'Link Type' drop-down, select "Link to anchor in the text".
  8. From the 'By Anchor Name' drop-down, choose the Anchor Name created above.
  9. Click OK.
Remove a Link
  1. In the Edit Template HTML tab, highlight the linked text.
  2. Click the 'Unlink' button on the Editor.
  3. Click UPDATE to save the Template.
 

Related articles