The XHTML WYSIWYG Editor For Desktop & Web Applications

Markers

In WYSIWYG mode, areas of content can be flagged with markers. Markers are labels that denote the start and end of a specific element. Markers are created using the following CSS vendor-specific extensions:

NameValuesInitial valueApplies toInherited?PercentagesMedia groups
-xs-marker-labelelement-name | attr(<identifier>) | <string>element-nameh1, h2, h3, h4, h5, h6, p, blockquote, table, address, div, ul, ol, dl, a, abbr, acronym, cite, code, dfn, em, kbd, samp, strong, var, big, small, sub, sup, tt, img, object, label, q, span, [custom elements]non/aall
-xs-marker-color<color>blackh1, h2, h3, h4, h5, h6, p, blockquote, table, address, div, ul, ol, dl, a, abbr, acronym, cite, code, dfn, em, kbd, samp, strong, var, big, small, sub, sup, tt, img, object, label, q, span, [custom elements]non/ascreen
-xs-marker-background-color<color>#ffff99h1, h2, h3, h4, h5, h6, p, blockquote, table, address, div, ul, ol, dl, a, abbr, acronym, cite, code, dfn, em, kbd, samp, strong, var, big, small, sub, sup, tt, img, object, label, q, span, [custom elements]non/ascreen
-xs-marker-border-color<color>blackh1, h2, h3, h4, h5, h6, p, blockquote, table, address, div, ul, ol, dl, a, abbr, acronym, cite, code, dfn, em, kbd, samp, strong, var, big, small, sub, sup, tt, img, object, label, q, span, [custom elements]non/ascreen

The following example displays a marker around an element with ID "content":

  1. #content {
  2. -xs-marker-label: "Press release body text";
  3. }

The following example will display a marker around a custom element <price> and use the data in the title attribute for a label.

  1. price {
  2. -xs-marker-label: attr(title);
  3. }

The following example displays a red color marker around a locked element:

  1. #footer {
  2. -xs-marker-label: "Read-only: do not edit";
  3. -xs-marker-color: white;
  4. -xs-marker-background-color: red;
  5. -xs-lock: yes;
  6. }

The marker CSS properties can be added to a CSS file that is referenced by the following <param> tag:

  1. <param name="CSS" value="http://yourserver/format.css" />

Or they can be added to an editor specific CSS file referenced by the following <param> tag:

  1. <param name="EditorCSS" value="http://yourserver/editor.css" />

Marker properties can also be applied at run-time. Here is a Visual Basic example:

  1. XHTMLEditor1.EditorCSS = "h1 {-xs-marker-label: 'Heading'}"

Note

By default, content within markers is displayed inside a dashed outline. To remove the dashed outline, set the CSS border to "none". For example:

  1. #content {
  2. -xs-marker-label: "Press release body text";
  3. border: none;
  4. }

XStandard removes inline elements that have no content. For example, given the following markup:

  1. <p>
  2. Text text <span></span> text text.
  3. </p>

The element <span> will be removed because it has no content. If there is a marker on the empty <span> element, the marker will be removed as well. If you require markers on inline content, use custom elements like this:

  1. <p>
  2. Text text <first-name></first-name> text text.
  3. </p>