Edit online

HTML Content Form Control

The oxy_htmlContent built-in form control is used for rendering HTML content. This HTML content is displayed as a graphical element shaped as a box. The shape of the box is determined by a given width and the height is computed based upon the length of the text.

The oxy_htmlContent form control supports the following properties:

href - The absolute or relative location of a resource. The resource needs to be a well-formed HTML file.
id - The unique identifier of an item. This is a <div> element that has a unique @id and is a child of the <body> element. The <div> element is the container of the HTML content to be rendered by the form control.
content - An alternative to the @href and @id pair of elements. It provides the HTML content that will be displayed in the form control.
width - Specifies the width of the content area using relative (em, ex), absolute (in, cm, mm, pt, pc, px), and percentage (followed by the % character) length units. The width property takes precedence over the columns property (if the two are used together).
hoverPseudoclassName - Allows you to change the way an element is rendered when you hover over a form control. The value is the name of a CSS pseudo-class. When you hover over the form control, the specified pseudo-class will be set on the element that contains the form control.
```
p:before {
  content: oxy_htmlContent(hoverPseudoclassName, 'showBorder')
}
p:showBorder {
  border: 1px solid red;
}
```

You can customize the style of the content using CSS that is either referenced by the file identified by the href property or is defined inline. If you change the HTML content or CSS and you want your changes to be reflected in the XML that renders the form control, then you need to refresh the XML file. If the HTML does not have an associated style, then a default text and background color will be applied.

Example: oxy_htmlContent Form Control

In the following example, the form control collects the content from the p_description <div> element found in the descriptions.html file. The box is 400 pixels wide and is displayed before a paragraph identified by the @intro_id attribute value.

p#intro_id:before {
    content: 
        oxy_htmlContent(
            href, "descriptions.html",
            id, "p_description",
            width, 400px);
}

An alternative example, using the content property:

p#intro_id:before {
    content: 
        oxy_htmlContent(
            content, "<div style='font-weight:bold;'>My content</div>",
            width, 400px);
}

Tip: To insert a sample of the oxy_htmlContent form control in a CSS file (or LESS file), invoke the Content Completion Assistant by pressing Ctrl + Space and select the

oxy_htmlContent code template.

To see more detailed examples and more information about how form controls work in Oxygen XML Editor, see the sample files in the following directory: [OXYGEN_INSTALL_DIR]/samples/form-controls.

Resources

For more information about form controls, watch our video demonstration: