By continuing to use this site, you agree to the storing of first- and third-party cookies on your device to enhance site navigation; analyze site, product, and service usage; and assist in our marketing and promotional efforts. Cookie Policy

 
Skip to Content

WYSIWYG Editor Advanced Fields

When editing pages in the WYSIWYG Editor, certain types of content have additional options for configuration and formatting beyond the standard fields. 

The "Advanced" tab of the "Insert/Edit Link" box includes various HTML attributes that can be added to an <a> tag. The behavior of the attributes are contextual to HTML5 and pre-HTML5/XHTML; the validity and usage of an attribute may differ from one specification to the next. HTML5 is enabled as a site setting. Many of the attributes provided on the "Advanced" tab require the href attribute to be defined within the <a> element.

  • ID

    Specifies the value of the id attribute for the link. In previous incarnations of HTML, the name attribute on an <a> element was used to create an anchor and target it. For conformance with HTML5, the id attribute is preferred over the name attribute. For OU Campus pages the id should at least be unique to a page. The id attribute is flexible in implementation and can provide a specific target for an element, including for on-page linking within a document. An id can also be used as a target by scripts. Another usage of id is to style an element with CSS, or to bookmark or footnote a document.

    An id attribute:

    • Is a global attribute in HTML5.
    • Must be a unique value relative to the "element's home subtree."
    • Must contain at least one character.
    • Must not contain any space characters.

    The following example first shows a link to a footnote, and an id within its <a> element. The second example below is a caret character that links back to the text. This is how footnotes are accomplished on this page.

    Syntax

    <a id="hyperlink-comparison" href="index.html#f1">See footnote.[1]</a>
    <a id="#f1" href="index.html#hyperlink-comparison">^</a>

  • Style

    The style attribute can be used to apply inline CSS for the hyperlink. Several attributes from HTML 4 now apply to all elements as global attributes; the style attribute is one of them. It is not necessary to enter the quotation marks. For a markup like:

    <a style="color:red; background-color:#B2FF99; font-weight:800; word-spacing: 50px;" href="https://support.omniupdate.com/">Funny Link Styling</a>

    Enter the following in the field:

    color:red; background-color:#B2FF99; font-weight:800; word-spacing: 50px;

  • Tab Index

    Specifies the tab index (tabindex attribute) for the hyperlink. The tabindex attribute is considered a global attribute in HTML5. The value must be a valid integer and is used to indicate that an element is focusable. Positive numbers specify the relative position of the element's focusable areas in the sequential focus navigation order, and negative numbers indicate that the control is to be unreachable by sequential focus navigation.

    • A tabindex makes an element selectable by mouse click in that it adds dotted outlines, which can be styled using :focus.
    • May be more useful in changing the tab-through order of a form than for changing the tabbing order of links on a page.
    • Since <a> tags have focus by default, could also be used to negate the tabbing through a page.

    Syntax

    <a tabindex="1" href="https://support.omniupdate.com">Link to page</a>

  • onClick

    Executes Javascript when the link is clicked.

    Syntax

    <a href="https://support.omniupdate.com" onclick="getElementById('demo').innerHTML=Date()">What is the time?</a>

Insert/Edit ImageLink to this section

The "Advanced" tab of the "Insert/Edit Image" box contains alignment, space, border, and style settings.

  • Alignment

    Define the alignment of the image to the text, as follows:

    • Baseline: Align the image with the baseline of the parent element; adds vertical-align: baseline;.
    • Top: Align the image with the top of the tallest element in the line; adds vertical-align: top;.
    • Middle: Place the image in the middle of the parent element; adds vertical-align: middle;.
    • Bottom: Align the image with the lowest element in the line; adds vertical-align: bottom;.
    • Text Top: Align the image with the top of the parent element's font; adds vertical-align: text-top;.
    • Text Bottom: Align the image with the bottom of the parent element's font; adds vertical-align: text-bottom;.
    • Subscript: Align the image with the subscript baseline of the parent element; adds vertical-align: sub;.
    • Superscript: Align the image with the superscript baseline of the parent element; adds vertical-align: super;.
    • Left: Float the image to the left of its container; adds float: left;.
    • Right: Float the image to the right of its container; adds float: right;.
  • Vertical and Horizontal space

    Type a number to define the margin, in pixels, for the image, as follows:

    • Vertical space: Add top and bottom margin to the image; adds margin-top: and margin-bottom:.
    • Horizontal space: Add left and right margin to the image; adds margin-left: and margin-right:.
  •  Border

    Add a border around the image, as follows:

    • Border width: Type a number to add a border width, in pixels, around the image; adds border-width:.
    • Border style: Click the dropdown to select solid, dotted, dashed, double, groove, ridge, inset, outset, none, or hidden; adds border-style:.
  • Style 

    View image styles, as follows:

    • Style: Selecting alignment, space, and borders populates this field with the CSS properties.
    • Style preview: See a preview of the styles with a placeholder image and text.

Insert/Edit MediaLink to this section

The "Advanced" tab of the "Insert/Edit Media" box contains options for an alternative source for the media and an image to be shown while the media is downloading

  • Alternative source URL

    Use to define another format of the same media.

    Adds the <source> as a child element of <video> or <audio>. For example: <source src="video.ogg">.

    Enter the external URL or use the file chooser to browse to the OU Campus file so that the dependency tag is inserted.

  • Media poster (image URL)

    Use media poster to add a still image as the first frame rather than the first frame of the media.

    Adds the poster attribute as a child element of <video> or <audio>.  For example: <poster="slide1.jpg">.

Table PropertiesLink to this section

The "Advanced" tab of the "Table Properties" box contains options for the table border. Right-click in a table and click Table Properties.

  • Border style
    Click the dropdown to select solid, dotted, dashed, double, groove, ridge, inset, outset, none, or hidden; adds border-style:.
  • Border color

    Click the dropdown to select a color for the table border; adds border-color:.

  • Background color

    Click the dropdown to select a background color for the table; adds background-color:.