Using the WYSIWYG Editor

The new Ellington WYSIWYG Editor is a modern,full featured, rich text editor that makes styling your content easier than ever before. It maintains the use of Ellington Inlines while adding an entirely new palette of tools to make content creation more robust.

Content edited in the new WYSIWYG editor is not backwards compatible. Meaning once upgraded to the new WYSIWYG, you cannot go back to the old one as the markup used cannot be read in the old WYSIWYG.

1. Inline Dropdown

The Inline Dropdown can be used to insert other content types into your story as an inline content item. Click on the dropdown to see a full list of inlines available.

Select the content type you wish to add as an inline

Enter the ID of the content item OR browse using the magnifying glass icon OR enter an external link to the content item you wish to insert. Once selected press the Add inline button.

*Note: The inline won't actually render inside the WYSIWYG, but rather will render in the preview on the right of the editor.

**Note: Inlines appear in the preview with generic styling, and are merely to serve as a reference to how text will flow around the inline. The actual styling of the inline may vary depending on your sites' design.

2. Rich Media Tools

The rich media tools section on the toolbar initially contains 4 buttons. The image button, the video button, the link button, and the "more" button.

  1. The image button is used in those circumstances where you might want to insert an image that isn't necessarily part of the Ellington media manager. This could be for one-off clip art style images, or just fast photos that don't need to be uploaded to Ellington first. These images will not be in the media manager and will not be available to other stories and are just one-off uploads. This field supports both uploading of images and linking to them.
  2. The video button is similar to the image button above, but is for videos.  It supports video URLs, embed code, and uploading of videos. Bare in mind though, uploading videos here does not add them to the media manager and the upload portion only allows 25MB videos. This is best used for things like quick Youtube or Vimeo embeds that you need in your story body.
  3. The link button allows you to add a hyperlink to any text either already selected, or entered in using the button. This will show the display text rather than the entire URL while still linking to the correct URL.
  4. The "more" button opens up more Rich Text media options that are less commonly used.
    1. Tables is used to insert a table into the story body and will give you a drop down to draw out the table proportions you need.
    2. Files is used to insert an external file that is not part of the documents system in Ellington
    3. Horizontal Rules inserts a horizontal line into the story body.

3. Formatting Tools

The formatting tools section on the toolbar initially contains 4 buttons. Left align, Center align, Justify and "more".

  1. Left Align will left align the text selected
  2. Center will center the selected text
  3. Line Height will let you adjust the spacing in between each line
  4. More will give you access to more, less used tools.
  1. Numbered Ordered List will provide an ordered list in regular numerical order.
  2. Right Align will right justify the selected text
  3. Justify will justify the text evenly to both sides of the render area
  4. Ordered List Other Numerals will allow you to select other ordered list types such as Roman numerals.
  5. Unordered Lists will allow you to use lists that contain dashes, circles, etc. (i.e. a bulleted list)
  6. Paragraph Format will let you choose the styling of the paragraph selected, great for Heading and sub headings.
  7. Paragraph Style allows you to select several default stylings for the paragraph selected, like UPPERCASE.
  8. Line Height allows you to adjust the space in between lines of the selected paragraph
  9. Decrease Indent allows you to decrease the amount of indented space.
  10. Increase Indent allows you to increase the amount of indented space
  11. Quotes allows you to insert quote text.

4. Text Tools

The text tools section on the toolbar initially contains 4 buttons. Bold, Italic, Underline and "more".

  1. Bold will BOLD the selected text
  2. Italic will italicize the selected text
  3. Underline will underline the selected text
  4. More will open a dropdown menu that allows you to use more text tools.
  1. Strike through will place a horizontal line through the selected text.
  2. Subscript will make the selected text smaller and appear slightly below the rest of the text.
  3. Superscript will make the selected text smaller and appear slightly above the rest of the text.
  4. Font Family will let you select from various fonts of the selected text.
  5. Font Size will let you change the size of the fonts of the selected text.
  6. Font Color will let you change the color of the selected text.
  7. Background Color will let you change the color directly behind the selected text.
  8. Inline Style will let you choose from various inline styles that have been pre-made and apply them to the selected text.
  9. Clear Formatting will clear all formatting from the selected text.

5. Miscellaneous Tools

The miscellaneous tools section on the toolbar initially contains 4 buttons. Undo, Redo, Full Screen Edit, and "more".

  1. Undo will undo the last edit. Up to 50 undos can be performed.
  2. Redo will redo the last removed edit.
  3. Full Screen Edit will make the WYSIWYG editor full screen for entering and editing content in large amounts more easily.
  4. More will open a dropdown with more options.
  1. Select all will select EVERYTHING in the editor window.
  2. Code View will let you edit the RAW HTML of the editor window for more precise control over formatting.

6. Editor Window

The editor window is where your text and content will appear where you can type or add the content you wan to format.


Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.