Using The Text Editor

Below is a list of comprehensive instructions for using all of the buttons displayed within the text editor of the Angry Frog! Content Management System. The instructions cover the use of the buttons only. Tabs such as File, Edit, Insert, Etc., are not covered in these instructions as they are not necessary for general use.

  • (Formats Button) For formatting blocks of text.
    • (Headings Tab) Place the cursor on the the line of text that you would like to be a heading. Click on the desired heading you would like to use.
    • (Inline Tab) Highlight the desired text that you would like to format and select the desired format still from the list (Bold, Italics, Underline, etc,.).
    • (Blocks Tab) Highlight the desired text that you would like to format and select the desired format style from the list. The main required format here is ‘paragraph’. This is most often used when reverting a heading back to regular text.
    • (Alignment Tab) Highlight the text that you would like to realign and then select the desired alignment (left,right, etc.,)
  • (Bold button) Highlight the text that you would like to make bold and then click this button.
  • (Italic button) Highlight the text that you would like to italicise and then click this button.
  • (Underline button) Highlight the text that you would like to underline and then click this button.
  • (Undo button) Click this button to undo the most recent change that you have made in the text editor.
  • (Redo button) Click this button to redo the most recent change that you have used the undo button to remove.
  • (Align left button) Highlight a block of text and click this button to have it aligned to the left.
  • (Align centre button) Highlight a block of text and click this button to have it centred.
  • (Align right button) Highlight a block of text and click this button to have it aligned to the right.
  • (Justify button) Highlight a block of text and then click this button to have the text justified to each side of its parameters.
  • (Bullet list button) Click this button to insert a bullet list in to the text editor wherever the cursor is placed. If the cursor is placed within a existing block of text, that text will become the first item in the bullet list.
  • (Numbered list button) Click this button to insert a numbered list in to the text editor wherever the cursor is placed. If the cursor is placed within a existing block of text, that text will become the first item in the numbered list.
  • (Decrease indent button) When the cursor is placed within an indented block of text, click this button to decrease the indent of that block of text.
  • (Increase indent button) When the cursor in placed within a block of text, click this button to have the text indented. Each time you click the button, the text will be indented further.
  • (Print button) Click this button to print all of the content displayed within the text editor.
  • (Table Button) For Inserting tables in the page content.
    • (Insert table tab) Click this tab and then select the size of the table you would like to insert from the field to the right. Each vertical square represents one column, and each horizontal square represents one row.
    • (Table properties tab) Click on this tab when the cursor is placed within a table. A ‘Table Properties’ box will appear, with a General and an Advanced tab. When you have finished making changes to the table properties, click the blue ‘Ok’ button.
      • Within the general tab, you can define the width, height, cell spacing, cell padding and border size for the table. All of these sizes are defined in pixels. You can also select to have a caption, which will be placed at the very top of the table. You can select the alignment of the table from the supplied dropdown list.
      • Within the Advanced tab, you can define the border colour, background colour, and html styling of the table. However, some knowledge of HTML will be required to make these changes.
    • (Delete table tab) Place the cursor in a table that you would like to remove and click this tab to delete it.
    • (Cell tab) Use this tab for editing specific cells. When opened, three further tabs will be displayed for you to select from.
      • (Cell properties) Click on this tab when the cursor is placed within a cell. A ‘Cell Properties’ box will appear, with a General and an Advanced tab. When you have finished making changes to the cell properties, click the blue ‘Ok’ button.
        • Within the General tab, you can define the pixel height and width of the cell. You can also define the cell type, scope, horizontal alignment, and vertical alignment for the cell. However, some previous knowledge of tables will be required.
        • Within the Advanced tab, you can define the border colour, background colour, and html styling of the cell. However, some knowledge of HTML will be required to make these changes.
      • (Merge cells) Click on this tab to merge take cells together. Enter in the number of cells from each column and row that you would like to merge and then click Ok.
      • (Split cell) With the cursor placed in a merged cell, click this tab to separate it back to the original cells.
    • (Row tab) Use this tab for editing specific rows. When opened, eight further tabs will be displayed for you to select from.
      • (Insert row before) Click this tab to insert a new row. The row will be placed directly above the row you currently have the cursor placed in.
      • (Insert row after) Click this tab to insert a new row. The row will be placed directly below the row you currently have the cursor placed in.
      • (Delete row) Click this tab to delete the row that you have the cursor placed in.
      • (Row properties) Click on this tab when the cursor is placed within a row. A ‘Row Properties’ box will appear, with a General and an Advanced tab. When you have finished making changes to the row properties, click the blue ‘Ok’ button.
        • Within the General tab, you can select the type and alignment of the row, as well as define the pixel height.
        • Within the Advanced tab, you can define the border colour, background colour, and html styling of the row. However, some knowledge of HTML will be required to make these changes.
      • (Cut row) Click this tab to remove the row from the table and add it to your clipboard.
      • (Copy row) Click this tab to add the row and all of its contents to your clipboard.
      • (Paste row before) Click this tab to paste a copied or cut row directly before the row you currently have the cursor placed in.
      • (Paste row after) Click this tab to paste a copied or cut row directly after the row you currently have the cursor placed in.
    • (Column tab) Use this tab for editing specific columns. When opened, three further tabs will be displayed for you to select from.
      • (Insert column before) Click this tab to insert a new column directly before the one you currently have the cursor placed in.
      • (Insert column after) Click this tab to insert a new column directly after the one you currently have the cursor placed in.
      • (Delete column) Click this tab to delete the column that you currently have your cursor placed in.
  • (Insert/edit link button) Click this button to open up ‘Insert link’ box.


    Enter the web address that you would like to link to in the URL text field (For example, https://www.google.com.au).  Enter the text that you would like the link to be displayed as in the ‘Text to display’ text field (For example, ‘Click here’). Enter the title of the link in the ‘Title’ text field (this is the small banner of text that is displayed when a cursor is placed on a link without clicking). If you would like the link to direct away from the current page, leave the Target as ‘None’. If you would like the link to open up in a new tab, change the target to ‘New Window’. Click the blue ‘Ok’ button when you are done.
  • (Anchor button) Use this button to insert an anchor in to the page. Please note, knowledge of how to use anchors in webpages will be required.
  • (Insert/edit image) The recommended method of inserting images in to the text editor is by using the Upload Photo box. However, this button can also be quite useful, especially when inserting an image from an online source. Click on the button to open the Insert/edit Image box. When finished, click the blue ‘Ok’ button.
    • Within the general tab, enter the url source of the image you would like to insert in the Source text field. For search engine optimisation purposes, enter a brief description in the Image Description text field. If you would like the image to be resized to a specific size, enter the desired pixel width and height in the Dimensions text fields. Leave the ‘Constrain proportions’ box ticked if you would like the resized image to retain its original proportions.
    • Within the advanced tab, you can define the Vertical Space, Horizontal space, Border, and html styling for the image. However, prior knowledge of html will be required.
  • (Text Color button) Click the arrow directly to the right of this button to change the colour of the text.
  • (Background color button)  Click the arrow directly to the right of this button to change the background colour of the text.
  • (Copy button) Highlight a section of content and click this button to add it to your clipboard.
  • (Paste button) Click this button to paste in the most recent item added to your clipboard.
  • (Find and replace button) Click this button to open the Find and Replace box.

    Enter in the word or phrase that you would like to find in the Find text field and click on the Find button to highlight every instance of it on the page. Check the ‘Match case’ field for the search to be case sensitive. Check the ‘Whole words’ field for the search to only find whole words. Once you have found the word/s, you can enter in a replacement word in the ‘Replace with’ text field. Click the Replace button to replace to first instance of the searched word. If there are multiple instances of the word, you can scroll between which one to replace with the Prev and Next buttons. To replace all instances of the word, click the ‘Replace all’ button.
  • (Special character button) Click this button to open up a selection of special characters for you to choose from that you can enter in to the content.
  • (Fullscreen button) Click this button to expand the text editor to the full width of the web browser.

Website Development

We all know how important websites are in this day and age to operate successful businesses. With over 75% of Australian’s accessing the Internet monthly.

Learn More

Contact Us

Contact sMod Tasmania today to enquire about or full range of website development and marketing services.

Learn More

Search Engine Optimisation

You've shared the web address with every person that you know, and even some you don't know.

Learn More