Classic WYSIWYG Editor

Last Updated: 23 May 2017

As of Squiz Matrix 5.0.0, the Edit+ Editor, Squiz Matrix's premium WYSIWYG content editor, is available for use in the Administration Interface. If you are using the Edit+ Editor, please refer to the Edit+ Editor chapter in this manual.

This WYSIWYG Editor is not officially supported by Squiz Matrix for the Google Chrome web browser. You can still use Chrome together with this Editor, but please note that some features of it may not work as expected. 

The WYSIWYG Editor is an interface allowing you to create the content of a page in a simple, user friendly environment. This means that users with no knowledge of HTML will still be able to create and edit the contents of a page within the WYSIWYG Editor. The buttons provided in the WYSIWYG Editor's tool bar allow you to format the content, including the addition of images, hyperlinks and tables. 

When the Content Type for a Division is set to WYSIWYG Editor, the Edit Contents icon ( edit icon ) is displayed in the top left hand corner of the Division. Click on the icon to bring up the WYSIWYG Editor, as shown in the figure below. Click within the white space and enter content for the page. 

The WYSIWYG Editor Content Type
The WYSIWYG Editor Content Type

Tip: You can copy and paste content from various applications including Microsoft Word. For more information, refer to the Replace Text section in this chapter.

Tip: You can use the following comment syntax format to add notes within the WYSIWYG source code that won't be printed on the front-end: <!--@@ Comment goes here @@-->

Not all users may have access to all of the buttons available on the WYSIWYG Editor's toolbar. A System Administrator can limit the buttons that are available to users through User Group PreferencesTo find out the function of each of the buttons on the tool bar, hover your mouse over the button; a pop-up will appear outlining the functionality of the button.

Many of the buttons in the WYSIWYG Editor's tool bar are the same as those used in standard content creation interfaces, such as Microsoft Office applications. The non-standard buttons are described below. 

The Replace Text pop-up
The Replace Text pop-up

Replace text icon Replace Text

This button allows you to remove various tags and attributes from the HTML source code. It is used when you are copying in content from other applications, such as Microsoft Word.

 

When you copy content from Microsoft Word into the WYSIWYG Editor, a number of tags and attributes are also copied across. These tags and attributes can potentially break the content of the page within Squiz Matrix and should be removed using the Replace Text tool.

 

When you click on this icon, the Replace Text pop-up will appear, as shown in the figure to the right. From the list, click on the tags and attributes that you would like to remove. You can select all of the options by clicking on the Check All box in the Replacement types section of the screen. 

Tip: The most reliable and effective way to clean up imported Microsoft Word content is through the use of the HTML Tidy tool. For more information, refer to the HTML Tidy Status section in this chapter.

The Search and Replce icon Search And Replace

The Search And Replace tool allows you to search the WYSIWYG content for text and replace it with a specified results string. For example, you could search for all uses of the word canine in your page and replace those instances with the word dog.

When you click on this icon, the Search And Replace pop-up will appear, where you can search for text, choosing to replace matches on either an all, selection or individual basis. A number of replace options are also available to determine the parameters of the search. The Search And Replace pop-up is shown in the figure below.

The Search And Replace pop-up
The Search And Replace pop-up

Snippet keyword icon Select Snippet Keyword

The Select Snippet Keyword list allows you to select from a list of Bodycopy assets to use within the content of the page. This is similar to linking a division or nesting the asset into the content of the page. When you select a value from the list, a Keyword Replacement will be added into the content, for example . When the page is displayed within your Site, this Keyword Replacement will be replaced with the content of the Bodycopy; in this case, the content of the CopyrightBodycopy will be displayed.

When you click on the Info icon icon, the Global Snippet Keyword Information pop-up will appear, as shown in the figure below.

The Global Snippet Keyword Information pop-up
The Global Snippet Keyword Information pop-up

This pop-up will show a list of all of the Bodycopy assets available in the Select Snippet Keyword list. The name, Keyword Replacementand description will be displayed for each Bodycopy

Tip: You can edit the name or description of a Bodycopy asset on its Details screen.

By default, this list will not appear within the WYSIWYG Editor tool bar. For this to appear, the Snippet Keyword Replace option must be selected on the Preferences screen. For more information about this screen, refer to the Users and Permissions manual.

The list of Bodycopy assets that are available will depend on how the Snippet content type has been set up. For more information on how to set up this Content Type, refer to the Snippet chapter in this manual.

Insert table icon Insert Table and Table properties icon Table Properties

The Insert Table button allows you to insert a table within the content of your page. The Table Properties button allows you to either edit the column and row properties of the table or insert, delete, split or merge cells.

To insert a table into the content, click on the Insert Table button; the pop-up shown in the figure below will appear, where you can specify the following information:

The Insert Table pop-up
The Insert Table pop-up

  • Rows: enter the number of rows for the table.
  • Cols: enter the number of columns for the table.
  • First Row: click this box to indicate that the first row in the table will be used as a heading row. You would tick this option if you wanted to have a heading for each column of the table. The text entered into each cell in the first row will have the HTML <th> tag wrapped around it.
  • First Column: click this box to indicate that the first column in the table will be used as a heading column. You would tick this option if you wanted to have a heading for each row of the table. The text entered into each cell in the first column will have the HTML <th> tag wrapped around it.
  • Class Name: enter a class name that has been defined in the style sheet of the design. This will be the style that the table will use.
  • Width: set the width of the table. You can specify width in the following units:
    • %: specifies the width of the table as a percentage of the current screen width.
    • px: specifies the exact width of the table in pixels.

    Tip: If you enter a percentage of the current screen width, the width of the table will change if the window is resized.

  • Border: set the width of the table border in pixels. This is the HTML table "border=" attribute. You can set the value to 0 to display the table with no border. The default value entered is 1.

    Tip: If no border setting is entered, newer browsers will display a one-pixel border by default.

  • Cell Spacing: enter the amount of space between the cells in the table in pixels.
  • Cell Padding: enter the amount of space between the edges of the cells and the contents of the cells in pixels.
  • Summary: enter a summary for the table that is being created. This will be placed in the HTML <table> summary attribute, which is helpful for people using screen readers and text based browsers.

Once you have entered the necessary information, click the OK button. The table will be created in the WYSIWYG Editor, as shown in the figure below.

An example table in the WYSIWYG Editor
An example table in the WYSIWYG Editor

To edit the properties of a table in the WYSIWYG Editor, click within the table and then click the Table Properties button. The Table Properties screen, shown in the figure below, will appear.

The Table Properties pop-up
The Table Properties pop-up 

On this screen, you can edit the properties of the table, cell, row or column. By default, the properties of the table are displayed when the Table Properties pop-up first appears. 

Editing the Table

To edit the properties of the table, click on the Table icon icon in the Selectors section. The fields shown in the figure above will appear on the right hand side of the screen. The properties of the table can be configured using the following fields:

  • ID: enter the unique ID to be used for the table. This enables the table to be identified in a style sheet.
  • Caption: enter the caption to be used for the table. This caption will appear at the top of the table in the content of the page and within HTML <caption> tags in the source code. The caption of the table is suggested for accessibility purposes.
  • Class name: by default, the Class Name that was entered into the Class Name field when the table was created will appear in this field. You can change the Class Name by clicking into this field and entering the new Class Name for the table. If this Class Name has been defined in the style sheet, the style of the table will be set to this class.
  • Width: by default, the width that was entered into the Width field when the table was created will appear in this field. You can change either the CSS or HTML width of the table in this field.
    • CSS: select CSS from the list if you wish to specify the width of the table in HTML, similar to <table style="width: 80%;"...>. Enter the width in the text field and then select the unit from the list provided. The units that are available include the following values:
      • px: specifies the exact width of the table in pixels.
      • %: specifies the width of the table as a percentage of the current screen width.

        Tip: If you enter a percentage of the current screen width, the width of the table will change if the window is resized.

      • pt: specifies the exact width of the table in font points.
      • em: specifies the width of the table in terms of the font-size of the relevant font. The em unit is equal to the computed value of the font-size property of the element on which it is used. This unit is also sometimes called the quad-width in typographic texts.
      • ex: specifies the width of the table in terms of the 'x-height' of the relevant font. The x-height is so called because it is often equal to the height of the lowercase 'x'.
    • HTML: select HTML from the list if you wish to specify the width of the table in HTML, similar to <table WIDTH="80%"...>. Enter the width in the text field and then select the unit from the list. The units that are available include the following values:
      • px: specifies the exact width of the table in pixels.
      • %: specifies the width of the table as a percentage of the current screen width.
  • Border: by default, the border that was entered into the Border field when the table was created will appear in this field. You can change either the CSS or HTML border of the table in this field.
    • HTML: select HTML from the list if you only want to specify the width of the border. Enter the value in the text field provided.
    • CSS: select CSS from the list if you wish to specify a style for the border of the table. Enter the border width in the text field and then select the style of the border from the list provided. The available selections include solid, dotted, dashed, double, grove, ridge, inset, outset, none and hidden.
  • Cell Spacing: by default, the spacing that was entered into the Cell Spacing field when the table was created will appear in this field. You can change the spacing by clicking into this field and entering the new Cell Spacing. This Cell Spacing is the space between the cells in the table in pixels.
  • Cell Padding: by default, the padding that was entered into the Cell Padding field when the table was created will appear in this field. You can change the padding by clicking into this field and entering the new Cell Padding. This Cell Padding is the amount of space between the edges of the cells and the contents of the cell in pixels.
  • Summary: by default, the summary that was entered into the Summary field when the table was created will appear in this field. You can change the summary by clicking into this field and entering the new Summary. This will be placed in the HTML <table> summary attribute, which is helpful for people using screen readers and text based browsers.
  • Frame: select which sides of your table cells should have a border. You can select from EmptyNo sides, The top side only, The bottom side only, The top and bottom sides only, The right and left sides only, The left-hand side only, The right-hand side only, and All four sides.

    Tip: If you select Empty, your table will inherit any style sheet definition for this table with relation to borders. If you select No sides, your table will have no borders, regardless of any style sheet definitions.

  • Rules: select what type of rules should appear within your table. These rules are the lines that are placed between each row and column. When a rule is defined, it is placed within the HTML <table> rules attribute. The values available in the list include the following:
    • Empty: this is the default option and will select not put any lines within your table. The rules attribute will not appear in the HTML source code of the page.
    • No Rules: select this option to have no rules appear within your table. In other words, no lines will appear between each column and row, as shown in the figure below. The rules attribute will be set to none within the HTML source code of the page.

      The No Rules option
      The No Rules option

    • Rules will appear between rows: select this option to have rules appear between rows in your table. In other words, lines will appear between each row, as shown in the figure below. The rules attribute will be set to rows within the HTML source code of the page.

      The Rules Between Rows option
      The Rules Between Rows option

    • Rules will appear between columns: select this option to have rules appear between columns in your table. In other words, lines will appear between each column, as shown in the figure below. The rules attribute will be set to cols within the HTML source code of the page.

      The Rules Between Columns option
      The Rules Between Columns option

    • Rules will appear between rows and columns: select this option to have rules appear both between rows and columns in your table. In other words, lines will appear between each column and row as shown in the figure below. The rules attribute will be set to 'all' within the HTML source code of the page.

      The Rules Between Rows and Columns
      The Rules Between Rows and Columns option

Editing a Cell

To edit the properties for a single cell, click on the Table cell icon icon in the Selectors section and select the cell you want to edit in the table on the left had side of the screen.

Tip: You must select a cell in the table on the left-hand side of the window before trying to edit the settings for a cell.

The fields shown in the figure below will appear on the right hand side of the screen.The properties of the cell can be configured using the following fields:

The Cell Properties
The Cell Properties

  • Class name: enter a class name that has been defined in the style sheet to set the style of the cell.
  • Width: specify the width of the cell in the boxes provided. You can select from the following for units:
    • %: specifies the width of the cell as a percentage of the table width.
    • px: specifies the exact width of the cell in pixels.
    • pt: specifies the exact width of the cell in font points.
    • em: specifies the width of the cell in terms of the font-size of the relevant font.
    • ex: specifies the width of the cell in terms of the x-height of the relevant font.  
  • Height: specify the height of the cell in the boxes provided. The units that are available for the Height are the same as those provided for the Width field and are described in the section above.
  • Border: enter the width of the border in pixels and select the style of the border from the drop down list. The available style options include solid, dotted, dashed, double, groove, ridge, inset, outset, none, and hidden.
  • Modify: these buttons allow you to merge the cell you currently have selected, over the next row or column.
    • Table add colspan icon Add Colspan: click this button to span the cell that is currently selected over the next column.
    • Table delete colspan icon Delete Colspan: click this button to remove the colspan of the currently selected cell.
    • Table delete rowspan icon Add Rowspan: click this button to span the currently selected cell over the next row.
    • Table add rowspan icon Delete Rowspan: click this button to remove the rowspan of the currently selected cell.
    • Table head cells icon Head Cell: click this button to set the currently selected cell as the head cell.
  • Horizontal: click on the icon to set the horizontal alignment of the currently selected cell. 
    • Table align left icon Align left
    • Table align center icon Align center
    • Table align right icon Align right
  • Vertical: click on the icon to set the vertical alignment of the currently selected cell. 
    • Table align top icon Align top
    • Table align middle icon Align middle
    • Table align bottom icon Align bottom
  • Abbr: enter an abbreviation to be used for the cell.
  • Axis: enter an axis to be used for the cell.
  • Scope: enter the scope to be used for the cell.
  • Headings: click on this button to make this cell a heading cell. It will be given a <th> tag rather than a <tr> tag in the HTML source code. This is required to make your content accessible.
Editing a Row

To edit the properties for a row, click on the Table row icon icon in the Selectors section and select the row you want to edit in the table on the left hand side of the screen. The fields shown in the figure below will appear on the right hand side of the screen.

Tip: You must select a row in the table on the left-hand side of the window before trying to edit the settings of the row.

The fields shown in the figure below will appear on the right hand side of the screen. The properties of the row can be configured using the following fields:

The Row Properties
The Row Properties

  • Class name: enter a class name that has been defined in the style sheet to set the style of the row.
  • Height: specify the height of the row in the boxes provided. The units that are available for the Height are the same as those provided for the Width field in the Cell Properties and are described above.
  • Border: enter the width of the border in pixels and select the style of the border from the drop down list provided. The available style options include solid, dotted, dashed, double, groove, ridge, inset, outset, none, and hidden.
  • Modify: these buttons allow you to modify the currently selected row.
    • Add row icon Add Row: click on this icon to add a row below the currently selected row.
    • Table delete row icon Delete Row: click on this icon to delete the currently selected row. 
    • Table head cells icon Head Cell: click this button the set the currently selected row as the head.
  • Horizontal: click on the icon to set the horizontal alignment of the currently selected row. 
    • Table align left icon  Align left
    • Table align center icon   Align center
    • Table align right icon  Align right
  • Vertical: click on the icon to set the vertical alignment of the currently selected row. 
    • Table align top icon Align top
    • Table align middle icon Align middle
    • Table align bottom icon Align bottom  
Editing a Column

To edit the properties for a column, click on the Table column icon icon in the Selectors section and select the column you want to edit in the table on the left had side of the screen. The fields shown in the figure below will appear on the right hand side of the screen.

Tip: You must select a column in the table on the left-hand side of the window before trying to edit the settings of the row.

The properties of the column can be configured using the following fields:

The Column Properties
The Column Properties

  • Class name: enter a class name that has been defined in the style sheet to set the style of the column.
  • Height: specify the height of the column in the boxes provided. The units that are available for the Height are the same as those provided for the Width field in the Cell Properties and are described above.
  • Border: enter the width of the border in pixels and select the style of the border from the drop down list provided. The available style options include solid, dotteddashed, double, groove, ridgeinset, outset, none, or hidden.
  • Modify: these buttons allow you to modify the currently selected column.  
    • Add column icon Add Column: click on this icon to add a column after the currently selected column.
    • Table delete column icon Delete Column: click on this icon to delete the currently selected column.
    • Table head cells icon Head Cell: click this button the set the currently selected column as the head.
  • Horizontal: click on the icon to set the horizontal alignment of the currently selected column.
    • Table align left icon Align left
    • Table align center icon Align center
    • Table align right icon Align right
  • Vertical: click on the icon to set the vertical alignment of the currently selected column.
    • Table align top icon Align top
    • Table align middle icon Align middle
    • Table align bottom icon Align bottom
Colour

The Colour section of the Table Properties screen is shown for all options in the Selectors section. You can use the colour picker to set the background or border colour of the table, cell, row or column depending on which option you have selected. The icons at the top left hand side of the colour picker determine whether you set the background colour or the border:

  • Set table background colour icon: click this icon to set the background colour of the table, cell, row or column. When you select a colour, the background colour is changed for the table, cell, row or column on the left hand side of the screen.
  • Set table border colour icon: click on this icon to set the border colour of the table, cell, row or column. When you select a colour, the border colour is changed for the table, cell, row or column on the left hand side of the screen.

The colour picker
The colour picker

Text colour icon Font Colour 

This button allows you to change the colour of the text. To do this, highlight the text you want to change and click the Font Colour button. The colour picker screen shown in the figure to the right will appear. Double click on the colour you want to use and click the OK button. The colour of the font will change. 

Background colour icon  Background Colour

This button allows you to change the background colour of the text. Highlight the text you want to change and click the Background Colour button. The colour picker screen shown in the figure above will appear. Double click on the colour you want to use and click the OK button. The background colour of the font will change.

This button allows you to insert a hyperlink to an external site or an internal asset. To add a hyperlink into the content of a page, select a piece of text and then click on the Insert Link button. The Insert Link pop-up will be displayed, as shown in the figure below.

The Insert Link pop-up
The Insert Link pop-up 

Quick Search

The Quick Search Results for a Link
The Quick Search Results for a Link

This field allows you to search for an asset within your system to link to. Enter a keyword, asset ID or URL into the field and press Enter. A list of search results will appear, as shown in the figure to the right.

In the search results, you can either click on the binoculars icon to view the asset in the Asset Map or click on the hyperlink to select the asset as the asset to link to. For example, in the figure shown above, when you click on the hyperlink Squiz, the Select Asset field will be filled in with that asset's name and ID.

General

This section allows you to either enter a URL of the external site, select an internal asset to link to or enter an anchor on the page. For more information on how to insert an anchor, refer to the Insert Anchor section within this chapter.

  • Protocol: select the protocol for the external URL from the following options:
    • http:// : used to create a link to a web page with a normal connection
    • https:// : used to create a link to a web page with a secure connection using SSL
    • ftp:// : used to create a link to a File Transfer Protocol server
    • rtsp:// : used to create a link to a Real Time Streaming Protocol server
    • mailto: :used to create a link to an email address
  • Link: enter the address of the link without the protocol. For example, if the URL you wish to hyperlink to is http://www.squiz.net you would select http:// in the Protocol field and enter www.squiz.net into the link field. If the Protocol you select is mailto: the link is the email address you want to send the email to, for example feedback@squiz.net.
  • Asset Type: specify the asset type of the asset that is being linked to. This allows you to indicate to Squiz Matrix if you are linking to a Link or Redirect Page asset; as these asset types point to external target URLs, when selected, the Insert Link tool will print a Global Keyword Replacement in the Link field to automatically link directly to the target URL of these assets, as opposed to linking to the asset, itself.
     
    The options available on this field are as follows:
    • All Assets
    • Link Asset
    • Redirect Page Asset
    When you select either the Link Asset or Redirect Page Asset options, you will only be able to select assets of that specific type in the Select Asset field.
     
    By default, this field will be set to All Assets, meaning that the Insert Link tool can link to any asset type.
  • Select Asset: you can select a Squiz Matrix asset to create a hyperlink to. For example, you may want to create a hyperlink to an MS Word Document or PDF File so that a user can click on it to download and view the file.
  • Anchor Name: type the name of an anchor on the linked external page, or on the current asset. For more information on how to insert an anchor, refer to the Insert Anchor section within this chapter.
Options

This section allows you to alter the style and appearance of the link. These fields are not mandatory.

  • ID: enter a unique ID attribute to assign a name to the link element that can then be targeted using JavaScript and CSS. The ID attribute can also be used to create an anchor.
  • Class:  enter the name of a style class in the current Design to apply that style to the link text. For example, if your Design contains a CSS style named purple that makes selected text purple, entering purple into this field will assign the style class to the link, as shown in the figure below.

    The CSS style assigned to a link
    The CSS style assigned to a link

    This link will now be purple when displayed on the Site, as shown in the figure below.

    The CSS style assigned to the link on a Site
    The CSS style applied to the link on a Site 

  • Title: enter the title of the URL. This value will be assigned to the HTML title attribute for the <a> tag.
  • Include Summary: select whether or not to include a summary of a linked File type asset on the frontend. If this field is selected, the keyword replacement %asset_summary_<assetid>% will be added to the link, where <assetid> is the ID of the asset you have linked to. This keyword replacement will display a summary of the file asset, as configured in the File Summary Format field on the Global Preferences screen. For more information, refer to the System Configuration manual.

    The Include Summary option
    The Include Summary option

New Window Options

Select whether to show the linked asset or URL in a new window or the current one.

  • No: if you select No, the hyperlink will open in the current window.
  • Yes: if you select Yes, the hyperlink will open in a new window with all browser options available.
  • Advanced: if you select Advanced, you can select whether or not to show the toolbar, menu bars, location bar, status bar or scroll bars and whether the window is resizable or not. You can also determine the exact size of the new browser window by specifying the height and width in pixels.

Tip: It is good practice to have your links open in new windows to allow users to remain on your Site. This means that when a user has finished viewing the linked page, they can close that browser window and continue navigating your Site.

This button allows you to remove a hyperlink from text or an image without having to delete your content. To do this, highlight the content that is currently linked and click the Remove Link button.

This button allows you to create a hyperlink to an external page without having to use the Insert Link pop-up. To do this, type the full URL of the hyperlink within the WYSIWYG Editor, highlight the URL and click this icon. The URL will not be a hyperlink. You can also do this with a hyperlink to an email address.

Anchor icon Insert Anchor

This button allows you to insert an anchor or destination point within the content of a page. These anchors can then be linked to, enabling quick navigation to the content within your Site. For example, you could create links at the top of a page to each separate section of content within that page. Outlined below are the steps you need to follow to create an anchor.

  1. Enter content into the WYSIWYG Editor. This will be the content that will be anchored.
  2. Place the cursor at the start of the section or highlight the text you want to anchor and click the Insert Anchor button. The pop-up, shown in the figure below, will appear.

    The Insert Anchor pop-up
    The Insert Anchor pop-up

  3. Enter the name of the anchor in the Anchor Name field and click the OK button.
  4. At the top of the WYSIWYG Editor, enter the text for the link that will take you to the anchor.
  5. Highlight the text and click the Insert Link button in the WYSIWYG Editor tool bar. The Insert Link pop-up will appear.
  6. Enter the name of the anchor in the Anchor Name field and click the OK button. The name you enter in this field must match the name you entered when you created the anchor. When you click on this link it will take you to the start of the content that you entered.

If you want to delete an anchor, either place the cursor where the anchor is located or highlight the text that has been anchored and click the Insert Anchor button in the WYSIWYG Editor tool bar. The Insert Anchor pop-up will appear. Click on the Remove field and click the OK button. The anchor will be deleted.

Image icon Insert Image

This button allows you to insert an image into your content. Before you can do this, however, you need to make sure that an Image asset has been created within Squiz Matrix that contains the image file. For more information on how to create an Image asset, refer to the Core Assets manual.

To insert an image, click on the Insert Image button in the WYSIWYG Editor tool bar. The pop-up shown in the figure below will appear.

The Insert Image pop-up
The Insert Image pop-up

Quick Search

The Quick Search results for an image
The Quick Search results for an Image

This field allows you to search for an Image to use within your system. Enter a keyword, asset id or URL into the field and press Enter. A list of search results will appear, as shown in the figure to the right.

In the search results, you can either click on the binoculars icon to view the asset in the Asset Map or click on the hyperlink to select the Image as the image to use within the content of the page. For example, in the figure shown above, when you click on the hyperlink squiz_logo.gif, the Image URL field will be filled in with the name and id of the asset and it will appear in the Preview section.

General
  • Image URL: select the image to use in this field.
  • Alternate Text: by default the Alt text that was entered into the Alt field when the Image asset was created will appear in this field. If the Alt text is not set, then the default value of this field will be set to the name of the image file you have selected. You can change the Alternate Text by clicking into this field and entering the new Alternate Text for the image. This value will be used in the HTML alt attribute of the <img> tag in the source code of the page.

    Tip: Changing the Alternate Text on the Insert Image pop-up, does not change the Alt text on the Image asset itself. To change the Alt text on the Image asset as well, you would need to go to the Details screen of the asset.

  • Image Title: enter a title for the image. This title will be displayed when a user hovers their cursor over the image, as shown in the figure below.

    The Image Title option
    The Image Title displayed on the front end

  • Create Image: this button allows you to create an Image instead of selecting an existing Image in the Asset Map. When you click this button, additional fields will appear, as shown in the figure below.

    The Create Image fields
    The Create Image fields

    The fields available are as follows:
    • Create an image: select the image file that you want to upload into the system.
    • Create under: select where you want to store the image in the system.
To create the image, click the Create & Use Image button. Click the Cancel button to select an existing image.
Optional Attributes

This section allows you to specify a URL for the long description of the image. It will be assigned to the HTML longdesc attribute of the tag in the code of the page and is used for accessibility purposes.

There are two ways to specify the URL for the description of the image. The first way is to specify the link manually by selecting either http:// or https:// from the Protocol list and entering the URL into the Link field. The second way is to select a Standard Page asset in your system to be used for the link.

Preview

This section shows a preview of the image that has been selected.

Layout

This section allows you to change the layout of the image within the content of the page.

  • Alignment: select the alignment of the text around the image. You can choose from:
    • Left or Right: select these options to specify a floating image; the image is placed at the left or right margin and content flows around it.
    • Top: aligns the top of the image with the top of the tallest item in the line. This could be text or another image.
    • Text top: aligns the top of the image with the top of the tallest text in the line. This is usually the same as Top, but not always, depending on whether there is another image in the line.
    • Middle: aligns the middle of the image with the baseline of the current line.
    • Abs middle: aligns the middle of the image with the middle of the current line.
    • Baseline: aligns the bottom of the image with the baseline of the current line.
    • Bottom: aligns the bottom of the image with the bottom of the current line. This is essentially the same as Baseline.
    • Abs bottom: aligns the bottom of the image with the bottom of the current line.

    Tip: The align attribute is deprecated in HTML 4.0 and the vertical-align and float properties of style sheets provide more flexible methods of aligning images.

  • Border Thickness: enter the number of pixels for the border. By default this value is 0 meaning that no border will be applied to the image. This value will be used in the HTML border attribute of the <img> tag in the source code of the page.
  • Horizontal: enter the spacing to be applied to the left and right of the image. By default this value is -1 meaning that no spacing will be applied to the image. This value will be used in the HTML hspace attribute of the <img> tag in the source code of the page.
  • Vertical: enter the spacing to be applied to the top and bottom of the image. By default this value is -1 meaning that no spacing will be applied to the image. This value will be used in the HTML vspace attribute of the <img> tag in the source code of the page.
  • ID: enter the ID for the image. This ID can then be used in a CSS or JavaScript.
  • Class: enter the HTML or CSS class for the image.
Size

This section allows you to change the size of the image. A System Administrator may have limited your access to these fields and hence you will not be able to edit them.

  • Width: enter the width of the image in pixels. This value will be used in the HTML width attribute of the <img> tag in the source code of the page.
  • Height: enter the height of the image in pixels. This value will be used in the HTML height attribute of the <img> tag in the source code of the page.

Movie icon Embed Movie

This button allows you to embed a movie file into your content. Please note that the Embed Movie plug-in supports only mov, swf, wmv, asf, asx, mpg, and mpeg file types.

To insert a movie, select the Embed Movie button on the WYSIWYG Editor tool bar. The pop-up shown in the figure below will appear.

The Embed Movie pop-up
The Embed Movie pop-up

Quick Search

The Quick Search results for a movie
The Quick Search results for a Movie

This field allows you to search for a File to use from within your system. Enter a keyword, asset id or URL into the field and press Enter. A list of search results will appear, as shown in the figure to the right.

You can either click on the binoculars icon to view the asset in the Asset Map or click on the hyperlink to select the File as the movie to use within the content of the page. For example, in the figure shown above, when you click on the hyperlink squiz.wmv , the Select Asset field will be filled in with the name and id of the asset.

General

This section allows you to select which movie you want to embed. This can be an external URL or an internal asset. To embed an external movie, use the Protocol and Link field. To embed an internal movie, use the Select Asset field.

  • Protocol: select the protocol of the URL you want to use. For example, if the URL is 'http://www.squiz.net' then select http:// from the Protocol list. The available options are http://, https://, ftp:// and rtsp://.
  • Link: enter the address of the URL you want to use. For example, if the URL is http://www.squiz.net then enter www.squiz.net into the Link field.
  • Select Asset: select the asset to embed. Before you can do this, however, you need to make sure that a File asset has been created within Squiz Matrix that contains the movie file. For more information on how to create a File asset, refer to the Core Assets manual.
Controls

If the file you are using is of type wmv, asf or asx, you can set the following options:

  • Auto Start: check this box to auto start the movie.
  • Loop: check this box to loop the movie.

If the file you are using is of type mov, wmv, asf and asx, you can set the following option:

  • Show Controls: check this box to show the movie controls.
Size

This section allows you to change the size of the movie.

  • Width: enter the width of the movie in pixels.
  • Height: enter the height of the movie in pixels.

Youtube icon Embed YouTube

This button allows you to embed content that is hosted on YouTube within the WYSIWYG Editor. When you click this icon, the pop-up shown in the figure below will appear.

The Quick Search results for a Movie
The Embed YouTube pop-up

General

This section allows you to select which YouTube video you want to embed. Either enter the ID of the video in the Video ID field or enter the full URL into the URL field.

Controls

For the YouTube video, select from the following options:

  • Auto Start: check this box to auto start the movie.
  • Loop: check this box to loop the movie.
  • Full Screen: check this box to show the movie in full screen.
  • Show Related Videos: check this box to show a list of related movies from YouTube.
  • Enable Genius Bar: check this box to enable the genius bar.
  • Enable Javascript API: check this box to enable the JavaScript API.
Size

This section allows you to change the size of the YouTube video.

  • Width: enter the width of the movie in pixels.
  • Height: enter the height of the movie in pixels.
Style

This section allows you to change the style of the YouTube video.

  • Border: check this box to show a border for the video
  • Primary Border Colour: enter the hex value for the colour to use for the primary border colour
  • Secondary Border Colour: enter the hex value for the colour to use for the secondary border colour.

Abbreviation icon Insert Abbreviation

This button allows you to insert a definition for an abbreviation that is in the content of the page. This definition will appear when a user hovers the mouse over the abbreviation on the page. For example, Aus. is entered as content in the WYSIWYG Editor. The abbreviation Aus. is highlighted and the Insert Abbreviation button is clicked. The Insert Abbreviation pop-up will appear, as shown in the figure below.

The Insert Abbreviation pop-up
The Insert Abbreviation pop-up

An example abbreviation
An example abbreviation

The full definition of the abbreviation is entered into the Definition field. When you hover the mouse over the abbreviation Aus., the abbreviation definition appears, as shown in the figure to the right. 

This Definition will appear in the HTML title attribute of the <abbr> tag in the source code of the page. The abbreviation Aus. will have a dotted line under it to indicate that it is an abbreviation. Please note that Internet Explorer does not support the automatic insertion of an abbreviation tag, and you may have to enter this tag manually in the HTML source view.

Tip: For accessibility reasons, it is recommended that you insert an abbreviation definition for the first occurrence of the abbreviation on each page.

Acronym icon Insert Acronym

This button allows you to insert a definition for an acronym that is in the content of the page. This definition will appear when a user hovers the mouse over the acronym on the page. For example, ASAP is entered as content in the WYSIWYG Editor. The acronym ASAP is highlighted and the Insert Acronym button is clicked. The Insert Acronym pop-up will appear, as shown in the figure below.

The Insert Acronym pop-up
The Insert Acronym pop-up

An example acronym
An example acronym

The full definition of the acronym is entered into the Definition field. When you hover the mouse over the acronym ASAP the acronym definition appears, as shown in the figure to the right.

This Definition will appear in the HTML title attribute of the <acronym> tag in the source code of the page. The acronym ASAP will have a dotted line under it, to indicate that it is an abbreviation.

Tip: For accessibility reasons, it is recommended that you insert an acronym definition for the first occurrence of the acronym on each page.

The Insert Special Character pop-up
The Insert Character pop-up

Special character icon Insert Special Character

This button allows you to insert a special character into the content of the page. When you click on the button, the special character pop-up appears, as shown in the figure to the right. Click on a character to insert it into the content of the page.

Choose language icon Choose Language

This list allows you to specify the language for a piece of text in your content. For example, if you have some content that is in French, you can highlight the text and select French from the list. This will then insert the HTML <span> tag around the text and set the tag's lang attribute to fr, which is French.

Tip: This is useful for accessibility purposes as it will assist screen readers to determine that the text is in a different language.

Definition term icon Insert Definition Term and Definition description icon Insert Definition Description 

When these two buttons are used in conjunction with each other, you can build a definition list within the content. A definition list consists of terms and descriptions with the term being defined in a HTML <dt> tag and the description being defined in a HTML <dd> tag. An example of this is shown in the table below.

HTML Code Output
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

Coffee
    Black hot drink
Milk
    White cold drink

To enter this list into the WYSIWYG Editor, the following steps are followed:

  1. Click on the Insert Definition Term icon. The text shown in the figure below will appear in the WYSIWYG Editor.

    Insert the definition term into the WYSIWYG Editor
    Inserting the definition term into the WYSIWYG Editor

  2. Replace the Type the term text with the term for the list. For this example, the term Coffee is entered.
  3. To enter the definition of the term, hold down the Ctrl key and press the D key on the keyboard. The text shown in the figure below will appear under the term.

    Insert the definition into the WYSIWYG Editor
    Inserting the definition into the WYSIWYG Editor

  4. Replace the Type the definition text with the definition of the term. For this example, the definition Black hot drink is entered.
  5. To enter the next term, hold down the Ctrl key and press the D key on the keyboard. The Type the term text will appear under the definition.
  6. Repeat steps 2 – 5 to add additional terms and definitions to the list.
  7. Once you have completed building the list, hold down the Ctrl key and press the D key twice. This will return the WYSIWYG Editor into the normal editing mode.

Insert citation icon Insert Citation

This button allows you to specify that a piece of text is a citation. The WYSIWYG Editor will wrap the text with the HTML <cite> tag. When a user views this text in your site, it will be in italics. To use this function, highlight the text to be marked as a citation and click the Insert Citation button.

Insert definition icon  Insert Definition

This button allows you to insert a definition for a word in the content of the page. This definition will appear when a user hovers their cursor over the word on the page. For example, Definition is entered as content in the WYSIWYG Editor. The word Definition is highlighted and the Insert Definition button is clicked. The following pop-up will appear.

The Insert Definition pop-up
The Insert Definition pop-up

The definition of the word is entered into the Title field. The word Definition will appear in italics indicating that it has been defined and when you hover the mouse over it, the definition appears, as shown in the figure below.

An example definition
An example definition

Quotation icon Quotation

This button allows you to specify that a piece of text is a quote. The WYSIWYG Editor will wrap the text with the HTML <blockquote> tag. This should be used when you have a long quote to present in your content. When a user views this text in your site, it will be indented on either side, as shown in the figure below.

An example quote
An example quotation

To use this function, highlight the text to be marked as a quote and click the Quotation button.

Visual Aid icon Visual Aid

This button allows you to display the visual indicators for hidden elements. When this button is clicked, indicators for the 'lang' attribute, anchors and table borders will be displayed. It will also display the difference between a table header and a table cell. The figure below shows the WYSIWYG Editor with the Visual Aid function enabled.

An example of Visual Aid in the WYSIWYG Editor
A Visual Aid example in the WYSIWYG Editor

Spell checker icon  Check Spelling

This button allows you to check the spelling of the content that has been entered into the WYSIWYG Editor. When you click on the Check Spelling button, the pop-up shown in the figure below will appear.

The Check Spelling pop-up
The Check Spelling pop-up

You can fix any spelling errors by either entering the correct spelling into the Replace with field or double clicking on the correct word in the Suggestions list. After you have fixed a spelling error, the spell checker will move onto any subsequent spelling errors.

Current style icon Current Style

This button shows the current style of the text. For example, if your text is red and bold, the A in this icon will be red and bold.

Toggle HTML icon Toggle HTML Source

This button allows you to toggle between the WYSIWYG Editor and the HTML source code of the content. The figure below shows a WYSIWYG Editor where the Toggle HTML Source button has been clicked.

Toggled HTML source code in the WYSIWYG Editor
Toggled HTML source code in the WYSIWYG Editor 

If you want to, you can modify the HTML source code. To go back to the WYSIWYG Editor view, click on the Toggle HTML Source button again.

HTML Tidy Status

After you have edited the content of your page in a WYSIWYG Editor and clicked Commit, Squiz Matrix will clean up the HTML code that was created, to ensure that it meets coding standards. The HTML tidy icon icon located in the top right hand corner of the division indicates the current HTML Tidy status. The following statuses are displayed:

  • HTML tidy icon (disabled) Grey icon: HTML Tidy is disabled and is not running for this Squiz Matrix system.
  • HTML tidy icon (wait) Yellow icon: HTML Tidy has never been run on the content in the Division.
  • HTML tidy icon (pass) Green icon: HTML Tidy was able to clean the content in the WYSIWYG Editor last time the Commit button was clicked.
  • HTML tidy icon (fail) Red icon: HTML Tidy failed to clean the content in the WYSIWYG Editor last time the Commit button was clicked.

HTML Tidy Accessibility Checker

After you edit the content of your page in the WYSIWYG Editor and click Commit, Squiz Matrix will check the accessibility of the content that was created.

Tip: HTML Tidy may need to be run multiple times before your content is declared accessible. It is recommended that you continue to Commit your content until the green accessibility icon is displayed.

The Accessibility checker icon icon in the top right hand corner of the division indicates the HTMLTidy accessibility checker status. The following statuses are displayed:

  • Green accessibility icon Green icon: the content in the WYSIWYG Editor was accessible the last time the Commit button was clicked.
  • Red accessibility icon Red icon: the content may require attention. Hover your cursor over this icon to determine which sections of your content may need to be assessed. A pop-up will appear containing information on any content that is deemed not accessible.

Please note this icon will only appear if the HTMLTidy Accessibility Check Level has been set on the External Tools Configuration screen. For more information on this, refer to the System Configuration manual.

View source icon View Source

The HTML source of the content entered into the WYSIWYG Editor can be viewed when no locks are acquired by using the View Source button. This allows users to toggle between the preview and source read-only content.


Next Chapter

Send Feedback

Noticed an error?
Want to suggest an improvement?

Let Us Know

The Latest

Let Us Know What You Think

Let us know if you spot any errors or if you have any ideas on how we can improve the Matrix Community Website.

Contact Squiz for Demo

Let us show you the true power of Squiz Matrix by giving you a personalised demonstration.