Text Area Form Control

The oxy_textArea form control supports the following properties:

• edit - Lets you edit the value of an attribute, the text content of an element, or Processing Instructions (PI). This property can have the following values:
  • @attribute_name - The name of the attribute whose value is being edited. If the attribute is in a namespace, the value of the property must be a QName and the CSS must have a namespace declaration for the prefix.
  • #text - Specifies that the presented/edited value is the simple text value of an element.

    Note

    You can set the value of the visibility property to -oxy-collapse-text to render the text only in the form control that the oxy_editor function specifies.
  • #content - This parameter is useful when an element has mixed or element-only content and you want to edit its content inside a text area form control.

    For example, if you have the following XML content:

    <codeblock outputclass="language-xml">START_TEXT<ph>phase</ph>
               <apiname><text>API</text></apiname></codeblock>

    and your CSS includes the following snippet:

    codeblock:before{
    content:
        oxy_textArea(
          edit, '#content',
          contentType, 'text/xml');
    }

    then the text area form control will edit the following fragment:

    START_TEXT<ph>phase</ph><apiname><text>API</text></apiname>

    Note

    When the value of the edit property is #content, the text area form control will also offer content completion proposals.

• #content - This parameter is useful when an element has mixed or element-only content and you want to edit its content inside a text area form control.

  For example, if you have the following XML content:

  <codeblock outputclass="language-xml">START_TEXT<ph>phase</ph>
             <apiname><text>API</text></apiname></codeblock>

  and your CSS includes the following snippet:

  codeblock:before{
  content:
      oxy_textArea(
        edit, '#content',
        contentType, 'text/xml');
  }

  then the text area form control will edit the following fragment:

  START_TEXT<ph>phase</ph><apiname><text>API</text></apiname>

  Note

  When the value of the edit property is #content, the text area form control will also offer content completion proposals.

• columns - Controls the width of the form control. The unit size is the width of the w character.
• 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).
• fontInherit - This value specifies whether or not the form control inherits its font from its parent element. The values of this property can be true or false (default value). To make the form control inherit its font from its parent element, set the fontInherit property to true.
• visible - Specifies whether or not the form control is visible. The possible values of this property are true (default value) and false.
• rows - This property specifies the number of rows that the form control presents. If the form control has more lines, you can scroll and see them all.

• contentType - Specifies the type of content for which the form control offers syntax highlighting. The following values are supported: text/css; text/shell; text/cc; text/xquery; text/xml; text/python; text/xsd; text/c; text/xpath; text/javascript; text/xsl; text/wsdl; text/html; text/xproc; text/properties; text/sql; text/rng; text/sch; text/json; text/perl; text/php; text/java; text/batch; text/rnc; text/dtd; text/nvdl; text/plain.

• indentOnTab - Specifies the behavior of the Tab key. If the value of this property is set to true (default value), the Tab key inserts characters. If it is set to false, Tab is used for navigation, jumping to the next editable position in the document.
• The white-space CSS property influences the value that you edit, as well as the from control size:
  • pre - The whitespaces and new lines of the value are preserved and edited. If the rows and columns properties are not specifies, the form control calculates its size on its own so that all the text is visible.
  • pre-wrap - The long lines are wrapped to avoid horizontal scrolling.

    Note

    The rows and columns properties must be specified. If these are not specified, the form control considers the value to be pre.
  • normal - The white spaces and new lines are normalized.
• 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_textArea(hoverPseudoclassName, 'showBorder')
  }
  p:showBorder {
    border: 1px solid red;
  }

textArea {
    visibility: -oxy-collapse-text;
    white-space: pre;
}

textArea[language="CSS"]:before {
    content: oxy_textArea(
      edit, '#text',
      contentType, 'text/css');
}

textArea[language="XML"]:before {
    content: oxy_textArea(
      edit, '#text',
      contentType, 'text/xml',
      rows, 10,
      columns, 30);
}

Tip

To insert a sample of the oxy_textArea form control in a CSS file (or LESS file), invoke the Content Completion Assistant by pressing Ctrl + Space (Command + Space on OS X) and select the oxy_textArea code template.

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