Edit Your Website Content

To begin, first log in to webOS.

The content editor is the section where you're able to add content. Below you'll learn what each button does and how to add and edit content.

1. The Basic Functions of Editor

• Source: is an option that allows you to edit content using HTML coding
• Cut: removes the selected text, and places it on a clipboard, allowing you to paste it somewhere else
• Copy: copies the selected text from the editor to a clipboard
• Paste: duplicates the selected text from the clipboard
• Paste as Plain Text: duplicates the selected text that you have copied, and pastes it without formatting
• Paste from Word: duplicates the selected text that you have copied from Word, and pastes it without formatting
• Print: prints all of the content inside of the editor
• Spellcheck: checks for any errors in spelling contained in the editor
• Undo: reverses your previous action performed in editor
• Redo: reverses the last undo
• Find: allows for a word search contained in the editor
• Replace: allows you to find a word from the editor, and replace with another word
• Select All: select all text in the editor at once
• Remove Format: removes formatting from the selected text, and sets it to the default styling
• Text Direction: change direction of text from the left or right

2. Insert An image

You can upload a file to the file manager first, or follow the steps below.

• Click the Image button, this will open the Image Properties window.
  
   
• Click on Browse Server.
  
   
• If your image is already uploaded to the file manager, find your image and double-click on it to insert it
   
• Click on the Upload button and select the image you want to upload. Once uploaded, double-click on the image to upload it. You can also drag and drop your image from your computer to the File Manager.
  
   
• In the image properties box, remove the numbers from the width and height
  
   

• To make your image responsive, click the Advanced tab, then under Stylesheet Classes, add the text “Img-responsive”.
  

• Click Ok.

3. Embed media from external sites
This allows you to embed a video from another source, such as YouTube. Follow the steps below.

• Click the Embed Media button, this will open the Embed Media Content window.
  
   
• In the URL section, paste your video URL.
  
   
• You can choose whether you want to align the video on the left, right or centre.

4. Insert Google Map
This allows you to insert an address from Google Maps, which will create a link to the actual location on Google Maps. Follow the steps below.

• Click the Google Maps button, this will open the Google Maps window.
  
   
• Paste the address or geocodes. You can adjust the zoom, map type, width and height.
  

5. Embed a document
This allows you to insert a PDF document. Follow the steps below.

• Click the Embed Document button, this will open the Embed Document window.
  
   
• Click on Browse Server.
  
   
• Click on the Upload button and select the file you want to upload. Once uploaded, double-click on the file to upload it. You can also drag and drop your file from your computer to the File Manager.
  
   
• If your file is already uploaded to the file manager, find your file and double-click on it to insert it.

6. Insert a horizontal line
This inserts a line divider. Please note you cannot change the colour of the divider.

• Click the  Horizontal line  button.
  

7. Insert a special character
This inserts a special character that may not be available on a keyboard. Follow the steps bellow.

• Click the  Special Character  button
  
   
• Click on the character you would like to select.
  

8. Insert a link
This inserts a hyperlink on the selected highlighted word. Follow the steps below.

• Highlight the text you would like to link, then click the Link button. This will open the Link window.
  
   
• In the URL section, paste your URL, or anchor, or email (see following step).
  
   
• Note that there are 3 different types of “links”:
  a) URL: links to another domain
  b) Anchor on Page: links to an anchor previously created in the editor
  c) Email: by clicking this link, it will open up an window so you can send an email
  Click on the Link Type options to choose which type of link you want.
  
   
• The Unlink button removes the hyperlink from the selected highlighted text.
  

9. Insert an anchor.
This links to an anchor previously created in the editor. Follow the steps below.

• Highlight the text you would like to link, then click the  Anchor  button. This will open the Anchor Properties window.
  
   
• Insert a reference point, which can later be used to link to this anchor spot. Name the anchor which you will reference.
  

10. Formatting Text in Editor

• Subscript:  Will set the character, symbol or number slightly below the normal line of text
• Superscript: Will set the character, symbol or number slightly above the normal line of text
• Paragraph Format: Changes the formatting of the text to different styling options
• Font: Select from a list of different fonts
• Size: Changes the size of the text
• Line Height: changes the line height of the selected text
• Text Colour: changes the colour of the selected text
• Background Colour: adds a coloured/highlighted background to the selected text
• Align Left: aligns text to the left
• Centre: centres text horizontally between two margins
• Align Right: aligns text to the right
• Justify: gives straight edges on both sides of text
• Bold: adds a bold styling to the selected text
• Italic: adds italicized styling the selected text
• Underline: adds an underline to the selected text
• Strike Through: adds a strike through to the selected text

12. Other Tools

• Insert a Bootsrap Template: This allows you to insert a predefined template. This template is responsive and allows you to add media or text side-by-side by inserting invisible columns/rows.

• Insert a Bootstrap Table: This allows you to insert a responsive table into the editor. You can select in the drop-down how many columns and rows your table needs. Additional table options are displayed on the right.

• Maximize: Makes the editing box full screen

• LoremIpsum: inserts placeholder text to the editor (useful for testing purposes)