What you see is what you get (WYSIWYG) with EOS
Wherever you come to edit content on your website in EOS, you will be using a simple content editor that allows you to format your text and upload images into your pages.
The CKEditor that you will be using has a similar feel to the likes of MS Office and various email editors that you may have used to format your content. It's nice and simple to use, and not overcrowded with endless buttons that will never be used!
This editor is the featured tool across all of your pages, products, categories, articles and more.
You can insert images, links, create lists and format text through one easy interface.
Remember: Every time you make changes, click UPDATE in the admin, visit the page on your website, then refresh your page to view the changes you have made.
CKEditor Overview
Now let's take a look at what the CKEditor does. Here's we'll take a look through each of the buttons available and the action it performs when editing your content.
 | Cut | Select a section of text and click cut to remove it from its current location. This will remain saved on your clipboard for when you paste it to another location. You can use CTRL + X as a keyboard shortcut to perform this action. |
 | Copy | Select a section of text and click copy to copy the text to your clipboard to paste elsewhere. You can use CTRL + C as a keyboard shortcut to perform this action. |
 | Paste | Click your cursor in the desired location and click Paste to insert your cut or copied text. You can use CTRL + V as a keyboard shortcut to perform this action. |
 | Paste as plain text | If you have copied text from another document, click Paste as plain text to insert into the editor, removing all source formatting. This is important to maintain your website styles and keep your content consistent. |
 | Paste from Word | If you have copied text from a Word document, click Paste from Word to insert into the editor. This will maintain all the styles and formatting from your Word Document. We always recommended that you use Paste as plain text instead. |
 | Undo | This will Undo the last action you entered into the editor. You can use CTRL + Z as a keyboard shortcut to perform this action. |
 | Redo | This will Redo the last action that you undid. You can use CTRL + Y as a keyboard shortcut to perform this action. |
 | Spell Check | This will check the spelling of your content as you go. Be sure to set to the relevant language, and click to Enable to use this feature. |
 | Insert Link | This feature allows you to create a link from a selection of text which, when clicked, takes the user to another page on your website, or another website.
|
 | Unlink | This feature allow you to select the link text and click Unlink to remove the hyperlink you have inserted. |
 | Anchor | This feature allows you to insert an anchor on the selected text. You can then apply the anchor name when inserting a link so that, when clicked, that link will take the user to that anchor destination. |
 | Table | Insert a table, setting the width in pixels or %, the number of columns and rows. This allows you to create a formatted grid to display data and information. |
 | Insert Horizontal Line | Insert a visible line break onto your page to break up content. |
 | Insert Special Character | This allows you to select from a list of special characters that you may want to include in your content. |
 | Insert Image | Place your cursor where you would like to insert the image in your content. Click insert image and upload from your device, or select from your existing library of images. When adding the image, be sure to set the ALT tag for SEO purposes. You can also use a number of other settings to adjust the width / height (maintaining the aspect ratio), and lazy load the image. This means that the image will be loaded after the page content has loaded, optimising performance. |
 | Block Style | This tool allows you to select a section of content and apply a “style wrapper” to it. For example an “Important box” which might wrap the text in a highlighted box and have an exclamation mark icon. |
| Edit Block Styles | This is there you can create your block styles. Creating a new entry and then inputting the desired HTML around the user content to be styled. |
 | Maximise / Minimise | This button allows you to maximise the editor to full screen for easy editing. You can then reduce it back down into the page area. |
 | Source | This button will show the raw HTML of the page content. Clicking again will switch it back to the content view. |
 | Bold | Select text with your cursor and click the Bold button to make the font thicker and stand out. |
 | Italic | Select text with your cursor and click Italic to italicise your text. Ideal for conversational or quoted text. |
 | Strikethrough | Add a line through your selected text |
 | Remove Formatting | Select an area of text and click to remove the formatting. |
 | Numbered List | Select several lines of text to turn them into a numbered list. Pressing return after the last entry will create a new entry. |
 | Bulleted List | Select several lines of text to turn them into a bullet point list. Pressing return after the last entry will create a new entry. |
 | Decrease Indent | Select text and click to bring it closer to the left-hand side of the page |
| Increase Indent | Select text and click to indent it slightly from the left-hand side of the page. |
 | Block Quote | Select text and click to format the text as a quote. |
 | Styles | Select text and choose from a dropdown list of preformatted styles. |
| Format | Select text and choose from a dropdown of heading / text formats with an SEO value. Format is your standard content paragraph text. H1 - H4 are heading tags with an SEO relevance, with H1 being the most important. You should keep text with these tags keyword relevant, as search engines will look at these when deciding the importance and relevance of the copy on your page. They are also important to visually break up your content, making it easy to read and digest by readers. |
What's next?
We highly recommend making a test page on your website and experimenting with using the editor to explore how to format the content on your website pages.
Why not take a look at how to create and edit your website pages next!
