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. Some of the fields below may not be available in the interface, depending on which version of the WYSIWYG you use.

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.

Advanced Tab

Many of the attributes provided on the Advanced tab require the href attribute also 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;

  • Classes

    Classic Editor Only

    Specifies one or more classes for the hyperlink that have been defined in CSS. The class attribute is considered global in HTML5 and can also be used to specify a microformat.

    Syntax

    <a class="shake animated" href="https://support.omniupdate.com/">Link to page</a>

  • Target Name

    Classic Editor Only

    The "Target Name" field can be used to specify a target or browsing context for a hyperlink. By default when no target is specified, _self is assumed, but does not have to be explicitly set. Using target can also imply a new browsing context. The href attribute is required when utilizing target. The target can also be set on the General tab and if it is explicitly set there, the value is returned on the Advanced tab. The following predefined values can be used:

    • _self: Opens the link in the current window/frame/tab. Generally used for linking to pages within the institution's website.
    • _blank: Opens the link in a new window. Generally used for linking to pages on another site, binary files like PDFs, in order to open content in a new browser tab.
    • _parent: Opens in a parent window/frame; previously common with framesets (pre-HTML5).
    • _top: Opens in a top-most parent frame to replaces all frames (pre-HTML5)

    The frame/frameset element is not included in HTML5.

    Syntax

    target="_blank"

  • Language Direction

    Classic Editor Only

    Specifies the text direction (dir attribute) for the link. The HTML specification suggests that the use of dir is preferred over specifying text direction with CSS. It also allows for the value of the attribute to be "auto" but does not prefer it, even though the auto value allows for the direction to be determined programatically. The first word of the paragraph is tagged with <bdi>, meaning that this particular word can go in either direction.

    Syntax

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

    The dir attribute is global in HTML5. The drop-down provides the following choices:

    • Left to Right (dir="ltr"): Provides directionally isolated left-to-right text.
    • Right to Left (dir="rtl"): Provides directionally isolated right-to-left text.
  • Target Language

    Classic Editor Only

    Specifies the language of the target content of the hyperlink (not the language of the link itself). The hreflang attribute is considered a global attribute in HTML5.

    Syntax

    hreflang="sv"

    For more information and examples, see Indicating the language of a link destination.

  • Language Code

    Classic Editor Only

    Specifies the primary language (lang attribute) for content of the element: in this case, a hyperlink and for any element attributes that contain text. The lang attribute is considered a global attribute in HTML5. Its value must be a valid BCP 47 tag, or empty string. Setting the attribute to the empty string indicates that the primary language is unknown. If these attributes are omitted from an element, then the language of this element is the same as the language of its parent element, if any.

    Syntax

    <a lang="fr" href="http://http://www.france.fr/">Lien vers la page</a>

  • Target Character Encoding

    Classic Editor Only

    Obsolete for HTML5. Prior to HTML5, charset can be used to specify the encoding for the target to which the hyperlink is linked.

    Syntax

    <a charset="ISO-8859-1" href="https://support.omniupdate.com/">Link to page using ISO encoding.</a>

    However, the default character encoding for HTML5 is UTF-8, as the unicode standard provides broader support for global localization with an inclusive set of characters, punctuations, and symbols.

  • Target MIME Type

    Classic Editor Only

    Specifies the MIME type for the hyperlink. The href attribute is required when utilizing type. This can be used to indicate the media type of the linked resource. The value must be a valid MIME type, which might include an image, audio, or video media type. Examples of this string are:

    • text/html
    • video/ogg
    • image/png

    For more information about valid MIME types, visit the IANA MIME Types Registry.

    Syntax

    <a type="text/html" href="https://support.omniupdate.com/">Link to page</a>

  • Relationship Page to Target

    Classic Editor Only

    Specifies a specific relationship (rel attribute) for the hyperlink to the target. One or more values can be provided for the attribute and if more than one is used, they must be space-separated. The meaning of some link type attribute values are determined in context by element or by combination usage with another attribute. Link types are always ASCII case-insensitive, and must be compared as such.

    The rel attribute is an extensibility mechanism that can be used to "annotate" links. The href attribute is required when utilizing target. It is not used by browsers so much as by search engines.

    Syntax

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

    Attribute Value Link Type Description
    alternate Hyperlink

    Indicates that link target is an alternate representation of the current content.

    • If used with the type attribute set to the value application/rss+xml or the value application/atom+xml, the keyword creates a hyperlink referencing a syndication feed (though not necessarily syndicating exactly the same content as the current page).
    • If used with the hreflang attribute, and that attribute's value differs from the root element's language, it indicates that the referenced document is a translation.
    • If used with the type attribute, it indicates that the referenced document is a reformulation of the current document in the specified format.
    author Hyperlink

    Indicates that link target is the author of the current content.

    • Intended to be a way to provide more information about the author.
    • Can be used with mailto in order to provide the author's email address.
    bookmark Hyperlink Gives a permalink for the nearest ancestor article element of the linking element in question, or of the section the linking element is most closely associated with, if there are no ancestor article elements.
    help Hyperlink

    Indicates that the target content provides help information.

    • On some browsers, the help keyword causes the link to use a different cursor.
    license Hyperlink Indicates that the main content of the current document is covered by the copyright license described by the referenced document. Another usage is if a piece of content is covered by a different license than the rest of the page.
    next Hyperlink

    Indicates that the current document is a part of a series, and that the next document in the series is the referenced document.

    • A document may be part of multiple sequences.
    • Content without a "next" indicates that the sequence is at its end.
    nofollow Annotation Indicates that the link is not endorsed by the original author or publisher of the page, or that the link to the referenced document was included primarily because of a commercial relationship between people affiliated with the two pages.
    noreferrer Annotation Requires that the user agent not send an HTTP Referer (sic) header if the user follows the hyperlink. It indicates that no referrer information is to be leaked when following the link.
    prefetch External Resource Specifies that the target resource should be preemptively cached.
    prev Hyperlink

    Indicates that the current document is a part of a series, and that the previous document in the series is the referenced document.

    • A document may be part of multiple sequences.
    • Content without a "previous" indicates that the sequence is at its beginning.
    search Hyperlink

    Gives a link to a resource that can be used to search through the current document and its related pages.

    tag Hyperlink

    Indicates that the target link provides tag-like clarification or categorization for the current content.

    non-predefined  

    The attribute values listed in this table above are predefined in the HTML5 specification. The spec also references additional values both existing and proposed for HTML5.

  • Relationship Target to Page

    Classic Editor Only

    Obsolete for HTML5. For pre-HTML5, it specifies the reverse relationship (rev attribute) for the hyperlink. If more than one value is used, they must be space-separated. The rev attribute refers to the relationship between the target document and the current document, opposite to the rel attribute.

    Syntax

    <a rev="stylesheet">Link to page</a>

    The rev attribute can take the following values:

    • alternate: Current document is an alternate version of the target document.
    • stylesheet: Current document is a stylesheet for the target document.
    • start: Current document is the first document.
    • next: Current document is the next document compared with the link target.
    • prev: Current document comes before the target content in a series.
    • contents: Current document is the table of contents for the link target.
    • index: Current document is the index for the link target.
    • glossary: Current document is the glossary for the link target.
    • copyright: Current document contains copyright information for the link target.
    • chapter: Current document is a chapter of the link target.
    • section: Current document is a section of the link target.
    • subsection: Current document is a subsection for the link target.
    • appendix: Current document is the appendix for the link target.
    • help: Current document is the help for the link target.
    • bookmark: Current document is a bookmark for the link target.
  • TabIndex

    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>

  • AccessKey

    Classic Editor Only

    Specifies one or more access keys (accesskey attribute) assigned to the hyperlink. The accesskey attribute is considered a global attribute in HTML5. If specified, the value must be an ordered set of unique space-separated tokens that are case-sensitive, each of which must be exactly one Unicode code point in length.

    • Creates a keyboard shortcut that activates or focuses the element.
    • Can include more than one key.

    Syntax

    <a accesskey="access-key" href="https://support.omniupdate.com">Link to page</a>

  • onclick

    JustEdit Only

    Executes Javascript when the link is clicked.

    Syntax

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

The Classic Editor also shows the "Popup" and "Events" tabs when inserting or editing a link.

Popup Tab

The "Popup" tab defines a new window that opens when the link is clicked. It uses JavaScript with HTML and creates an onClick event handler that uses the open() method on the window object. Defining the JavaScript popup here adds the appropriate scripting to the page. Various browsers may have different interpretations for rendering the script in a browser window, especially as some attributes may be obsolete in the working version of HTML5.

  • Popup Properties

    The syntax for the Window open() method is: window.open(URL,name,specs,replace). The URL and name attributes can be defined with the properties as described below. Only "JavaScript Popup" is required.

    • JavaScript Popup: Select to enable the link as a popup and make the other properties and options available.
    • Popup URL: Defines the URL that opens in the new window. Browse to a file to use the dependency tag, or paste a URL.
    • Window Name: Defines the name attribute for window.open, which can be a target attribute or define the name of the window. If left blank, the window opens in a new window. The target attributes are the same as those for a normal link:
      • _blank: Default, opens the URL in a new window.
      • _parent: Opens the window into a parent frame.
      • _self: Opens the window by replacing the current page.
      • _top: Opens the window with the URL replacing a frameset, if applicable.
    • Size: Defines the height and width, respectively, of the window in pixels.
    • Position (X/Y): Defines the position of the window in terms of left and top, e.g. the pixels from the left of the parent browser window and from the top of the parent.
  • Options

    Several of the values for the specs (features) attribute can additionally be defined within the Options section.

    • Show Location Bar: Adds location=yes, which allows the window to display the locations/address bar.
    • Show Menu Bar: Adds menubar=yes, displaying the menu bar.
    • Show Toolbars: Adds toolbar=yes, displaying the browser toolbar, which can include the back, forward, reload, and stop buttons.
    • Show Status Bar: Adds status=yes, which displays the status bar in the window.
    • Show Scrollbars: Adds scrollbars=yes, which allows scrollbars in the window. This feature is recommended for accessibility.
    • Make Window Resizable: Adds resizable=yes, which allows the user to resize the window. This feature is recommended for accessibility.
    • Dependent (Mozilla/Firefox Only): Adds dependent=yes, which makes the second window dependent on its parent. If the parent window is closed or minimized, the popup is as well.
    • Insert 'return false': Selected by default. Adds return false;, which specifies if the URL should add a new entry or replace what is currently loaded in browsing content.

Events Tab

The Events tab of the Insert/Edit Link box can be used to define an alternative event for a link. Fill each desired event field with a string of JavaScript to enable the alternative event.

  • Event Handlers Reference
    Attribute Usage Values Notes

    onFocus

    HTML Form

    Fires when an element receives focus from a pointing device or through tab navigation.

    Does not bubble; not cancelable.

    onBlur

    HTML Form

    Fires when an element loses focus either via the pointing device or by tabbing navigation.

    Does not bubble; not cancelable.

    onClick

    Mouse

    Fires when an element is clicked. Sequence is mousedown, mouseup, click.

    Bubbling and cancelable.

    onDblClick

    Mouse

    Fires when the pointing device button is double clicked over an element.

    Bubbling and cancelable.

    onMouseDown

    Mouse

    Fires when the pointing device button is pressed over an element.

    Bubbling and cancelable.

    onMouseUp

    Mouse

    Fires when the pointing device button is released over an element.

    Bubbling and cancelable.

    onMouseOver

    Mouse

    Fires when the pointing device is moved onto an element.

    Bubbling and cancelable.

    onMouseMove

    Mouse

    Fires when the pointing device is moved while it is over an element.

    Bubbling not cancelable.

    onMouseOut

    Mouse

    Fires when the pointing device is moved away from an element.

    Bubbling and cancelable.

    onKeyPress

    Keyboard

    Fires after keydown, when a key on the keyboard is pressed.

    Bubbling and cancelable.

    onKeyDown

    Keyboard

    Fires before keypress, when a key on the keyboard is pressed.

    Bubbling and cancelable.

    onKeyUp

    Keyboard

    Fires when a key on the keyboard is released.

    Bubbling and cancelable.

Mailto Links

When inserting a mailto link via the Classic Editor, the following two optional fields are available:

  • Element ID: Adds the id attribute with the specified value to the <a> tag. The attribute itself and quote marks aren't necessary.
  • Inline Style: CSS can be defined here and added as inline syntax of CSS.

Images

The "Advanced" tab of the Insert/Edit Image box has an option for an image swap on hover, as well as other settings. This tab is only available with the Classic Editor.

  • Swap Image

    Allows for adding a second image that replaces the original when a user hovers over the image. Alternate images take the dimensions of the original.

    • Alternative Image: Select to turn on this feature.
    • For Mouse Over: Choose the image that appears when the cursor hovers over the original image.
    • For Mouse Out: Choose the image that appears when the cursor doesn't hover over the original image.

    If an image is added for both "For Mouse Over" and "For Mouse Out," then the original image is not seen.

  • Miscellaneous
    • ID
      Specifies the value of the id attribute for the image. 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 ids 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
    • Language Direction
      Specifies the text direction (dir attribute) for the image. The HTML specification suggests that the use of dir is preferred over specifying text direction with CSS. It also allows for the value of the attribute to be "auto" but does not prefer it, even though the auto value allows for the direction to be determined programatically. The HTML specification provides an example of tagging that uses the value of auto for the dir on a paragraph. The first word of the paragraph is tagged with <bdi>, meaning that this particular word can go in either direction.
    • Language Code
      Specifies the primary language (lang attribute) for content of the element, in this case a hyperlink and for any element attributes that contain text. The lang attribute is considered a global attribute in HTML5. Its value must be a valid BCP 47 tag, or empty string. Setting the attribute to the empty string indicates that the primary language is unknown. If these attributes are omitted from an element, then the language of this element is the same as the language of its parent element, if any.
    • Image Map

      In HTML and XHTML, an image map is a list of coordinates relating to a specific image, created in order to hyperlink areas of the image to different destinations (as opposed to a normal image link, in which the entire area of the image links to a single destination). For example, a map of the world may have each country hyperlinked to further information about that country. The intention of an image map is to provide an easy way of linking various parts of an image without dividing the image into separate image files.

      To use the image map feature, the web developer must have first created a properly coded image map with the appropriately defined hotspots in the HTML of the target web page. The image map must be named (e.g., name="navmap"). Once this is done a user can insert the appropriate image into a page, go to the Advanced tab, and type in the name of the image map. This name must be preceded by a # character (e.g., #navmap). Now the image is associated with the image map.

      Due to the nature of image maps (dimensions are hard set for the hot-linked areas of an image), an image must be of the proper dimensions to support the map, as well as have the image content that maps to the areas that are defined in the image map.

    • Long Description Link
      Specify a hyperlink to a detailed description of the image.

Videos and Other Media

The "Advanced" tab of the Insert/Edit Embedded Media is only available with the Classic Editor.

When defining the values for the attributes, you don't need to add quotation marks.

  • ID

    Used to add a value for the id attribute. For example:

    <video id="how-to-video" width="320" height="240" src="/videos/how-to.mp4" preload="none"></video>

  • Name

    Used to add a value for the name attribute for video types that use object (all types except HTML5 video/audio and iframe). For example:

    <object name="flash-v" width="320" height="240" data="/videos/how-to.mp4" type="application/x-shockwave-flash"><param name="src" value="/videos/how-to.mp4" />

  • Align

    Used to define the alignment of the media to the text. Adds the align attribute to object and iframe elements but not HTML5 video/audio:

    • Top: The top of the media is aligned with the top of the tallest letter in the line; adds align="top".
    • Right: The media is set to the right of the text with wrap-around; adds align="right".
    • Bottom: The bottom of the media is aligned with the lowest letter in the line; adds align="bottom".
    • Left: The media is set to the left of the text with wrap-around; adds align="left".
  • Background

    Used to add the background color attribute and value for the object and iframe elements. The color can be specified by typing a hex value (or allowable HTML color name) into the available text field or selecting the color from the color picker. When adding the hex, the hashtag should be included. For example:

    bgcolor="#27d8cd"

  • V-Space

    Obsolete in HTML5; it is recommended to use CSS instead. For other HTML markup, sets the vertical space at the top and bottom of the media by adding the vspace attribute and value in pixels. Takes a number. It is not necessary to add the px to the value. Only set for object and iframe elements. For example:

    vspace="200"

  • H-Space

    Obsolete in HTML5; it is recommended to use CSS instead. For other HTML markup, sets the horizontal space at the left and right sides of the media by adding the hspace attribute and value in pixels. Takes a number. It is not necessary to add the px to the value. Only set for object and iframe elements. For example:

    hspace="200"

  • Title

    Adds the title attribute and value, and is valid for the object element. For example:

    title="OU Campus Demo Video"

Media Type Options

Additional advanced options are available, depending on the type of media selected under the "General" tab.

  • HTML5 Video

    Uses <video> and attributes.

    • Alternative Source 1: Adds the <source> as a child element of <video>. This can be used to define another format of the same video. For example: <source src="video.ogg" />. Enter the video URL or use the file chooser to browse to the file so that the dependency tag is inserted.
    • Alternative Source 2: Adds another <source> as a child element of <video>. This can be used to define yet another format of the same video. For example: <source src="video.webm" />.
    • Poster: Adds the poster attribute with the specified value. A "poster" can be used to add a still image to be shown as the first frame rather than the actual first frame of the movie. For example: poster="slide1.jpg".
    • Preload: Provides a hint about the expected need to play the resource and how it affects bandwidth/server load. For example, preloading metadata only fetches metadata about the resource such as dimensions, track list, and duration and subsequently hints that bandwidth is scarce. The options for preload are: Don't Preload (preload="none"), Preload Video Metadata (preload="metadata") and Let User's Browser Decide (preload="auto"). If Auto Play is set to autoplay, then autoplay takes precedence.
    • Auto Play: Adds the autoplay="autoplay" attribute and value so that the video is played on page load without the user having to initiate the start. Be advised that some web browsers are beginning to block autoplayed content.
    • Mute: Adds the muted="muted" attribute and value so that the video is played without sound.
    • Loop: Adds the loop="loop" attribute and variable in order to automatically replay the video.
    • Controls: Adds the controls="controls" attribute and value to provide a media player with user controls such as play, pause, scrub, and volume.
  • HTML5 Audio

    Uses <audio> and attributes.

    • Alternative Source 1: Adds the <source> as a child element of <audio>. This can be used, for example, to define another format of the same audio: <source src="audio.ogg" />. Enter the audio URL or use the file chooser to browse to the file so that the dependency tag is inserted.
    • Alternative Source 2: Adds another <source> as a child element of <audio>. For example: <source src="audio.wav" />.
    • Preload: Provides a hint about the expected need to play the resource and how it affects bandwidth/server load. For example, preloading metadata only fetches metadata about the resource such as dimensions, track list, and duration and subsequently hints that bandwidth is scarce. The options for preload are: Don't Preload (preload="none"), Preload Video Metadata (preload="metadata") and Let User's Browser Decide (preload="auto"). If Auto Play is set to autoplay, then autoplay takes precedence. An empty string uses auto.
    • Auto Play: Adds the autoplay="autoplay" attribute and value so that the audio is played on page load without the user having to initiate the start. Be advised that some web browsers are beginning to block autoplayed content.
    • Loop: Adds the loop="loop" attribute and variable in order to automatically replay the audio.
    • Controls: Adds the controls="controls" attribute and value to provide a media player with user controls such as play, pause, scrub, and volume.
  • Flash

    Uses <object>, name/value parameters, and type="application/x-shockwave-flash".

    • Quality: Adds a quality parameter with the corresponding value that determines whether to favor quality or speed, and then uses anti-aliasing to smooth bitmaps accordingly.
      • High: Adds <param name="quality" value="high" />. Favors appearance over playback speed and always uses anti-aliasing.
      • Low: Adds <param name="quality" value="low" />. Favors playback speed over appearance and does not use anti-aliasing.
      • Autolow: Adds <param name="quality" value="autolow" />. Emphasizes speed at first but improves appearance whenever possible.
      • Autohigh: Adds <param name="quality" value="autohigh" />. Emphasizes playback speed and appearance equally at first but sacrifices appearance for playback speed if necessary.
      • Best: Adds <param name="quality" value="best" />. Provides the best display quality and does not consider playback speed.
    • Scale: Adds the scale parameter with the corresponding value to specify how to resize the Flash media to fit within the pixel area specified by the containing <object>.
      • showall: Default. Adds <param name="scale" value="showall" />. The entire FLV file visible in the specified area without distortion, while maintaining the original aspect ratio of the movie. Borders can appear on two sides of the video.
      • noborder: Adds <param name="scale" value="noborder" />. Scales the FLV file to fill the specified area, while maintaining the original aspect ratio of the file. The player can crop the content, but no distortion occurs.
      • exactfit: Adds <param name="scale" value="exactfit" />. Makes the FLV file visible in the specified area without trying to preserve the original aspect ratio. Distortion can occur.
      • noscale: Adds <param name="scale" value="noscale" />. Prevents the FLV file from scaling to fit the area of the object. Cropping can occur.
    • WMode: Adds the wmode parameter (window mode) which for Flash media determines the relationship of the Flash container (window or bounding box) to the underlying HTML. This includes transparency, layering, positioning, and rendering.
      • window: Default. Doesn't add attributes; the background uses the background color from the HTML and the browser determines how the content is layered with other on-page elements. Adds <param name="wmode" value="window" />.
      • opaque: Lets HTML content appear above (layered on top of) the content, but obscures anything underneath the content. Content behind the file on the page is hidden. Adds <param name="wmode" value="opaque" />.
      • transparent: Makes the container transparent and the HTML layers are visible through the file. Alpha blended. Adds <param name="wmode" value="transparent" />.
    • SAlign: Sets the position for scaled content within the area defined by the width and height.
      • Left: Supported by Flash as "l". Aligns to the left of the browser window and crops other sides as necessary.
      • Top: Supported by Flash as "t". Aligns to the top of the browser window and crops other sides as necessary.
      • Right: Supported by Flash as "r". Aligns to the right of the browser window and crops other sides as necessary.
      • Bottom: Aligns to the bottom of the browser window and crops other sides as necessary.
      • Top Left: Aligns to the top, upper-left corner of the browser window and crops other sides as necessary.
      • Top Right: Aligns to the top, upper-right corner of the browser window and crops other sides as necessary.
      • Bottom Left: Aligns to the lower, left corner of the browser window and crops other sides as necessary.
      • Bottom Right: Aligns to the lower, right corner of the browser window and crops other sides as necessary.
    • Auto Play: Adds a parameter to determine to start the movie automatically or not. <param name="autostart" value="true" />. Be advised that some browsers are beginning to block autoplayed content.
    • Loop: Adds a parameter to determine to replay the movie when it reaches the end. <param name="loop" value="true" />
    • Show Menu: Adds a parameter to determine to show the shortcut menu with a right click (PC) or Control click (Mac). When false, only the About Flash item is shown on the shortcut menu. <param name="menu" value="false" />
    • SWLiveConnect: Adds <param name="swliveconnect" value="true" />. When selected determines whether the browser should start Java when loading Flash Player for the first time.
    • Base: Used to specify the base folder or URL for relative paths within the file. Used when the file is in a different folder.
    • Flash Vars: Adds flashvars attribute defined in key/value pairs, which can be passed to the file.
  • Transcode-It

    Uses <object>, name/value parameters, and type="application/x-shockwave-flash".

    • Flash Vars: Adds flashvars attribute defined in key/value pairs, which can be passed to the file.
    • Scale: Adds the scale parameter with the corresponding value to specify how to resize the media to fit within the containing <object>: uniform, fill, none, or exactfit.
    • Buffer(s): Adds the buffer length parameter: <param name="bufferlength" value="2" />
    • Start Image: Defines a start image for the movie.
    • Logo Overlay: Allows for a watermark to be added.
    • Default Volume: Allows a starting sound level to determined: <param name="defaultvolume" value="90" />
    • Control Bar: Values include none, over, and bottom, and determine if and where the controls are located for the media. Adds <param name="controlbar" value="over" />, for example.
    • Smooth Video: Specifies whether the video should be smoothed (interpolated) when it is scaled. For video playback using Flash Player 9.0.115.0 and later versions, set this property to true to take advantage of mipmapping image optimization.
    • Auto Start: When selected, allows the media to begin on page load. <param name="play" value="true" />. Be advised that some web browsers are beginning to block autoplayed content.
    • Repeat: Loops the video with <param name="loop" value="true" />
    • Zoom: Sets a zoom factor for the media.
  • QuickTime

    Uses <object>, name/value parameters, and type="video/quicktime".

    • Loop: Adds a parameter to determine to replay the movie when it reaches the end. <param name="loop" value="true" />
    • Auto Play: When selected, allows the media to begin on page load, rather than having to press the play button. <param name="autoplay" value="true" />. Be advised that some web browsers are beginning to block autoplayed content.
    • Cache: Sets the location to cache the HREF loaded with Target and if Target Cache is enabled. <param name="cache" value="true" />
    • Controller: Default is true unless the movie is .swf or vr. Clear the checkbox to remove the controls from users' view. <param name="controller" value="false" />
    • No Correction: Select the checkbox for no correction, which passes a value of true. Pertains to whether full perspective correction is used for QuickTime Virtual Reality (VR) format. <param name="correction" value="true" />
    • Enable JavaScript: When selected, this option initializes JavaScript connections between HTML and the player. <param name="enablejavascript" value="true" />
    • Kiosk Mode: When selected, the controller bar for the movie does not include the Save option, so viewers are not able to save a copy. <param name="kioskmode" value="true" />
    • Auto HREF: When selected, loads the URL specified in HREF without waiting for a mouse click. <param name="autohref" value="true" />
    • Play Every Frame: When selected, this option specifies to not drop frames even when there is not enough time to decompress and display them. This can mute audio and lead to slow playback. <param name="playeveryframe" value="true" />
    • Target Cache: Used with HREF/Target. When selected, the HREF loaded with Target is cached. <param name="targetcache" value="true" />
    • Scale: The options include tofit and aspect. <param name="scale" value="aspect" />
    • Start Time: Start time can be used to specify an offset time at which to play the movie. Format is HH:MM:SS:FF (hours:minutes:seconds:30ths of a second).
    • End Time: Specifies a time on the movie timeline at which to stop playing to the movie. Specified in HH:MM:SS:FF (hours:minutes:seconds:30ths of a second).
    • Target: Values are "framename," "myself," or "quicktimeplayer." Used with the HREF parameter. Play movie in QuickTime Player, named frame, or replace current movie. Default is QuickTime Player if not set. If a frame name is specified, the browser loads the URL in the named frame. If no frame of that name exists, the browser may create a new window with that name and open the URL there. If target is set to "myself" the URL replaces the current movie. The URL must specify something that QuickTime can play. If set to "quicktimeplayer," the URL loads in the QuickTime Player application. The URL must specify a format that QuickTime can play.
    • HREF: Specify a URL to load when the user clicks on the display area of the movie. The URL can be a webpage or a QuickTime movie. This can be used with the Target attribute and the URL loads in another frame or window, or in the QuickTime plug-in itself. If a relative URL is used in the HREF attribute, it must be relative to the currently loadedmovie, not relative to the current webpage. If the media is in a separate folder, specify URLs relative to the folder. To make the URL specified in the HREF attribute load when the movie loads, instead of when the user clicks the movie, enable the Auto HREF attribute.
    • Choke Speed: Sets the qtsrcchokespeed, which is used with the QT Source parameter. Choke Speed limits outgoing bandwidth (http or ftp) from the media server. Should be specified with the number of bits per second. For example, use 56000 to limit the bandwidth to 56,000 bits per second.
    • Volume: Sets the audio volume in percent. The default is 90 and can take a value between 0 and 300 using the local sound setting.
    • QT Source: Sets the value of the qtsrc attribute for passing protocols, including RTSP directly to the QuickTime plugin. Browsers are not designed to handle realtime streaming protocol directly. Rather, the plugin must receive the request. Use the file chooser to select the media. This field causes the plug-in to ignore the movie specified on the General tab for the src parameter and plays this file instead. One use case for this is to force the browser to spawn the QuickTime plug-in to play a file type whose extension would normally cause it to load a different plug-in, e.g. an mp3 file. Ostensibly, this could also be used to launch a video from an rstp:// server. It is recommended to specify a small (and actual) file from the General tab, if using this option to load a different file.
  • Shockwave

    Uses <object>, name/value parameters, and type="application/x-director".

    • Stretch Style: Sets the following parameter values: Meet (preserves the proportions of the media), Fill (stretches the media to fill), or Stage (expands the playing field). When set to meet or stage the stretch h and v align can be used to further refine the display. <param name="swstretchstyle" value="stage" />
    • Volume: <param name="swvolume" value="90" />
    • Stretch H-Align: When Stretch Style is set to meet or stage, then this can set the horizontal alignment. The parameter value can take Left, Center, or Right. <param name="swstretchhalign" value="center" />
    • Stretch V-Align: When Stretch Style is set to meet or stage, then this can set the vertical alignment. The parameter value can take Left, Center, or Bottom. <param name="swstretchvalign" value="stage" />
    • Auto Start: Adds a parameter to determine to start the movie automatically or not. <param name="autostart" value="true" />. Be advised that some web browsers are beginning to block autoplayed content.
    • Sound: <param name="sound" value="true" />
    • SWLiveConnect: Adds <param name="swliveconnect" value="true" />. Indicates whether the browser should start Java when loading Flash Player for the first time. Applies to the embed tag only. <param name="swliveconnect" value="true" />
    • Progress: <param name="progress" value="true" />
  • Windows Media

    Uses <object>, name/value parameters, and type="application/x-mplayer2".

    • Auto Start: Adds a parameter to determine to start the movie automatically or not. <param name="autostart" value="true" />. Be advised that some web browsers are beginning to block autoplayed content.
    • Enabled: When selected, the controls for the Windows Media Player plugin are enabled. <param name="enabled" value="true" />
    • Show Menu: Adds a parameter to determine to show the shortcut menu with right click (PC) or Control click (Mac). <param name="menu" value="false" />
    • Full Screen: When selected, uses full-screen mode to play the video. In order to work with the WMP control the video display must have a height and width of at least 1 pixel. If UI Mode is set to mini or full, the height control must be 65 or greater to accommodate the video display area in addition to the user interface. When selected and if UI Mode is set to invisible, then the control is not affected as this is an error condition. Users controls are affected by UI Mode selection: if UI Mode is full or mini, controls are displayed on mouse move. If UI Mode is set to none, then no controls are shown with the full screen mode. <param name="fullscreen" value="true" />
    • Invoke URLs: Select this option, to open a browser if a URL is passed from the file to the plug-in.
    • Mute: Select this checkbox to silence the audio. <param name="mute" value="true" />
    • Stretch to Fit: Select this checkbox to keep the original aspect ratio of the video. If the aspect ratio of the video does not match the aspect ratio of the video window, black mask areas may appear on either the top and the bottom, or left and right, of the video image. This property applies to the Windows Media Player control only when embedded in a webpage. Not support by Windows Media Player 10 Mobile. <param name="stretchtofit" value="true" />
    • Windowless Video: Select this option so the Player control renders video directly in the client area (rather than its own window). Allows for styling such as special effects or layering the video with text. This can degrade performance. Not support by Windows Media Player 10 Mobile. <param name="windowlessvideo" value="true" />
    • Balance: Integer from -100 to 100. Used to specify the balance for left and right audio channels. For example, -100 would sound like only the left channel is playing. <param name="balance" value="-45" />
    • Base URL: Used with embedded script commands to provide a base URL for relative, passed URLs. A trailing forward slash (/) is added to the value of the Base URL value; a leading period, backward slash, or forward slash (., \, and /) is deleted from the relative URL; the relative URL is added to the end of the base URL. All slashes in the resulting URL are pointed in the same direction (converted to forward or backward slashes) based on the direction of the first slash encountered in the new URL. Windows Media Player does not support the use of two periods (..) for relative URLs. For Windows Media Player 10 Mobile, this parameter is read-only, and always returns an empty string. <param name="baseurl" value="http://oudemo.com" />
    • Captioning ID: String. Used to specify the element with the closed captioning. The element name specified can be any HTML element in the webpage as long as it supports the innerHTML attribute. If the webpage contains multiple frames, the element name can only refer to an element in the same frame as the Player control. For Windows Media Player 10 Mobile, this property is read-only, and always returns an empty string. <param name="captioningid" value=" CCDiv" />
    • Current Marker: Takes a number; defaults to 0. Refers to markers in a video and plays from that point; only works if the video has markers. <param name="currentmarker" value="2" />
    • Current Position: Specified in seconds. Refers position in video in seconds. <param name="currentposition" value="2300" />
    • Default Frame: Names the frame used to display the URL. <param name="defaultframe" value="default-frame" />
    • Play Count: Number used to specify how many time the media plays. <param name="playcount" value="9" />
    • Rate: Changes the rate of the playback for the video. Acts as a multiplier value to play a clip at a faster or slower rate. The default value of 1.0 indicates the authored speed. A playback rate of 2 equates to twice the normal playback speed. Windows Media Player attempts to use the most effective of four different playback modes. These modes are smooth video playback with audio pitch maintained, smooth video playback with audio pitch not maintained, smooth video playback with no audio, and keyframe video playback with no audio. The mode chosen by the plug-in depends on numerous factors including file type and location, operating system, network, and server. <param name="rate" value="rate" />
    • UI Mode: Can be set to mini, full, invisible, or none. See Full Screen. <param name="uimode" value="ui-mode" />
    • Volume: Specifies the volume in a number ranging from 0 to 100. <param name="volume" value="50" />
  • Real Media

    Uses <object>, name/value parameters, and type="audio/x-pn-realaudio-plugin".

    • Auto Start: Adds a parameter to determine to start the movie automatically or not. <param name="autostart" value="true" />. Be advised that some web browsers are beginning to block autoplayed content.
    • Loop: Adds a parameter to determine to replay the movie when it reaches the end. See Num Loops, as when a number is used for the number of times the media should be played, this parameter is ignored. <param name="loop" value="true" />
    • Auto Goto URL: Select this checkbox to pass embedded URLs in the presentation to the browser. When set to false, RealPlayer sends the URLs to a Java applet or other application via the OnGotoURL callback. If not set, embedded URLs are not passed.
    • Center: When this checkbox is selected, the presentation is centered in the image window and the height and width of the presentation are reset to the original dimensions (as specified by width and height on the General tab). When not used, the media is not centered and can expand to fill the image window. Note: The Center and Maintain Aspect cannot both be set to true. <param name="center" value="true" />
    • Image Status: Allows information to be played in the status bar.
    • Maintain Aspect: Specifies whether the height-to-width (aspect) ratio of the clip should stay constant when the clip scales to fit the image window. If the checkbox is selected, the aspect ratio of the clip remains constant when the image window is resized. When this occurs, the clip is centered in the image window and scaled until one dimension reaches the window's boundaries and the other dimension is within the boundaries. If not used, then the media may appear distorted. Note: The Center and Maintain Aspect cannot both be set to true. <param name="maintainaspect" value="true" />
    • No Java: Prevents the Java Virtual Machine (JVM) from starting, if it is not yet running, and makes the use of JavaScript impossible. Named controls can't be referenced with JavaScript. <param name="nojava" value="true" />
    • Prefetch: Selecting this checkbox, enables prefetch playback mode, which allows RealPlayer to get the stream description information from a presentation before playback begins. <param name="prefetch" value="true" />
    • Shuffle: Select this checkbox to play all unplayed clips in a random order. This can be used for multiclip RAM files (.ram or .rpm) or SMIL files that contain only a sequence of clips. <param name="shuffle" value="true" />
    • Console: Specifies whether multiple controls should be linked together to manage playback of a single embedded presentation. Values include shared name, _master, or _unique. When the same console name is specified for multiple control on a page, this parameter can be used to enable these controls to manage playback of a single embedded presentation. For example, for multiple Play and Stop buttons on the same page, a shared console name enables them to control the same clip.
    • Controls: Used to specify the specific controls to use with the player. If not specified, the default for the RealPlayer plug-in is used (all). Possible values: All, TACCtrl, PositionSlider, FFCtrl, ImageWindow, InfoPanel, MuteCtrl, PauseButton, PlayOnlyButton, RWCtrl, StopButton, MuteVolume, HomeCtrl. (Respectively, All, Clip Information Field, Clip Position Slider, Fast Forward Button, Image Window, Information Panel, Mute Button, Pause Button, Play Button, Rewind Button, Stop Button, Volume Slider). Combinations of controls are also available.
    • Num Loops: Use a number to specify the how many times the presentation should repeat, after which it stops. If both Num Loops is set and Loop is set, the Loop parameter is ignored.
    • Script Callbacks: Specifies the callback events to handle via a comma separated list. Used by Netscape version 6.0 only, to specify the set of callback events to capture and handle. The events are assigned to the parameter via a comma separated list, such as: <SCRIPTCALLBACKS=OnPresentationOpened,OnPresentationClosed>
  • Iframe

    Uses <iframe> and attributes.

    • ID: Specifies the value of the id attribute for the iframe.
    • Name: Specifies a name for the element. For the iframe element it can be used to target a form submission.
    • Align: Sets alignment of the iframe (left, center, or right).
    • Background: Sets the background color of the iframe.
    • V-Space: Sets a margin on top of and below the iframe.
    • H-Space: Sets a margin to the left and right of the iframe.
    • Title: Titles the iframe content. Important for accessibility.

Tables

When inserting a table in either the Classic Editor or JustEdit, the "Advanced" tab is available. The availability of certain fields depends not only on which editor is being used, but whether HTML5 is in use.

  • ID

    Classic Editor Only

    Adds the id attribute to the <table> start tag with the value defined in the field.

    <table id="t-id-21">

  • Summary

    Classic Editor, non-HTML5 Only

    Adds the summary attribute to the <table> start tag with the value defined in the field.

    <summary="added value">

  • Style

    Is populated with CSS depending on what you enter in the other fields, and styles your table accordingly. This may be overwritten by existing CSS that styles your tables.

  • Language Code

    Classic Editor Only

    Specifies the primary language for the element's contents and for any of the element's attributes that contain text.

    <table lang="sl">

  • Background Image

    Classic Editor Only

    Enter an image URL (absolute or relative) to be used as the background.

  • Frame

    Classic Editor, non-HTML5 Only

    Could be used to identify which parts of a border around a table are shown. For example, selecting lhs in the Frame drop-down identifies that the left-hand side of the table border is visible: frame="lhs".

  • Rules

    Classic Editor, non-HTML5 Only

    Could be used to identify the borders of a table cell to be shown, similarly to frame. For example, rules="rows"; provides cell border style with the appearance of horizontal rules.

  • Language Direction

    Classic Editor Only

    Language direction can be specified as right-to-left or left-to-right with the dir attribute: dir="rtl".

  • Border Color

    In Classic Editor, launches the color picker to define the table border.

    In JustEdit, enter a hex code (e.g. #000EEE) to color the table border.

  • Background Color

    In Classic Editor, launches the color picker to define the table background.

    In JustEdit, enter a hex code (e.g. #000EEE) to color the table background.