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.
Insert/Edit LinkLink to this section
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, thename
attribute on an<a>
element was used to create an anchor and target it. For conformance with HTML5, theid
attribute is preferred over thename
attribute. For Omni CMS pages theid
should at least be unique to a page. Theid
attribute is flexible in implementation and can provide a specific target for an element, including for on-page linking within a document. Anid
can also be used as a target by scripts. Another usage ofid
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; thestyle
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.modercampus.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. Thetabindex
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.modercampus.com">Link to page</a>
- A tabindex makes an element selectable by mouse click in that it adds dotted outlines, which can be styled using
- onClick
Executes Javascript when the link is clicked.
Syntax
<a href="https://support.modercampus.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;
.
- Baseline: Align the image with the baseline of the parent element; adds
- 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:
andmargin-bottom:
. - Horizontal space: Add left and right margin to the image; adds
margin-left:
andmargin-right:
.
- Vertical space: Add top and bottom margin to the image; adds
- 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:
.
- Border width: Type a number to add a border width, in pixels, around the image; adds
- 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 Omni CMS 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 styleClick 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:
.