# Html Area

(part of package '[Servoy Extra Components](/reference/servoyextensions/packages/ui-component-packages/servoy-extra-components.md)')\
Extends designtime/SolutionModel: [JSWebComponent](/reference/servoycore/dev-api/solutionmodel/jswebcomponent.md)\
Extends runtime: [RuntimeWebComponent](/reference/servoycore/dev-api/forms/runtimeform/elements/runtimewebcomponent.md)

A Servoy Extra Component that provides a rich HTML editing area.

This is a reference page; many components have detailed usage guides [here](https://docs.servoy.com/guides/develop/application-design/ui-components).

## Properties

### dataProviderID

Bound data provider identifier for the HTML content. Type: [Dataprovider](/reference/servoy-developer/component_and_service_property_types.md#dataprovider)

***

### displaysTags

Flag indicating whether HTML tags should be displayed. Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md)

***

### editable

Flag indicating whether the HTML area is editable. Type: [Protected](/reference/servoy-developer/component_and_service_property_types.md#protected) Default Value: true

***

### enabled

Flag indicating whether the HTML area is enabled for user interaction. Type: [Enabled](/reference/servoy-developer/component_and_service_property_types.md#protected) Default Value: true

***

### readOnly

Flag indicating whether the HTML area is read-only. Type: [ReadOnly](/reference/servoy-developer/component_and_service_property_types.md#protected)

***

### responsiveHeight

Min height of the html editor, set only in responsive forms. Type: [Number](/reference/servoycore/dev-api/js-lib/number.md) Default Value: 300

***

### scrollbars

Configuration for the scrollbars in the HTML area. Type: [Scrollbars](/reference/servoy-developer/component_and_service_property_types.md#scrollbars)

***

### styleClass

CSS style classes applied to the HTML area component. Type: [Styleclass](/reference/servoy-developer/component_and_service_property_types.md#styleclass)

***

### tabSeq

Tab sequence order for keyboard navigation. Type: [Tabseq](/reference/servoy-developer/component_and_service_property_types.md#tabseq)

***

### text

The HTML content displayed in the editor. Type: [Tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring)

***

### toolTipText

Tooltip text displayed when hovering over the HTML area. Type: [Tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring)

***

### visible

Flag indicating whether the HTML area is visible. Type: [Visible](/reference/servoy-developer/component_and_service_property_types.md#visible)

***

## Events

### onActionMethodID(event)

Fired when an action is triggered in the HTML area.

**Parameters:**

> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object containing details about the action event.

***

### onDataChangeMethodID(oldValue,newValue,event)

Fired when the HTML content changes.

**Parameters:**

> * {[${dataproviderType}](/reference/servoy-developer/component_and_service_property_types.md#dataprovider)} oldValue The previous HTML content.
> * {[${dataproviderType}](/reference/servoy-developer/component_and_service_property_types.md#dataprovider)} newValue The new HTML content.
> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object associated with the data change.

**Returns:** {[Boolean](/reference/servoycore/dev-api/js-lib/boolean.md)}

***

### onFocusGainedMethodID(event)

Fired when the HTML area gains focus.

**Parameters:**

> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object containing details about the focus gained event.

***

### onFocusLostMethodID(event)

Fired when the HTML area loses focus.

**Parameters:**

> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object containing details about the focus lost event.

***

### onRightClickMethodID(event)

Fired when the HTML area is right-clicked.

**Parameters:**

> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object containing details about the right-click event.

***

## API

### addShortCut(shortCut,callback)

Adds a shortcut key to the HTML area. The shortcut key can be a combination of keys such as Ctrl, Alt, Shift, etc.

**Example:**

```js
myElement.addShortCut('F9', callbackFunction);
```

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} shortCut The shortcut key combination to be added (e.g., 'F9').
> * {[Function](/reference/servoy-developer/component_and_service_property_types.md#function)} callback The function to be executed when the shortcut key is pressed.

***

### getAsPlainText()

Gets the plain text for the formatted Html Area.

**Example:**

```js
var my_text = myElement.getAsPlainText();
```

**Returns:** [String](/reference/servoycore/dev-api/js-lib/string.md) The plain text

***

### getScrollX()

Returns the x scroll location of specified element - only for an element where height of element is less than the height of element content.\
NOTE: getScrollX() can be used with getScrollY() to set the scroll location of an element using the setScroll function.

For Example:

```js
//returns the X and Y scroll coordinates
var x = forms.company.elements.myarea.getScrollX();
var y = forms.company.elements.myarea.getScrollY(); 
//sets the new scroll location
forms.company.elements.myarea.setScroll(x+10,y+10);
```

**Example:**

```js
var x = myElement.getScrollX();
```

**Returns:** [Number](/reference/servoycore/dev-api/js-lib/number.md) The x scroll location in pixels.

***

### getScrollY()

Returns the y scroll location of specified element - only for an element where height of element is less than the height of element content.\
NOTE: getScrollY() can be used with getScrollX() to set the scroll location of an element using the setScroll function.

For Example:

```js
//returns the X and Y scroll coordinates
var x = forms.company.elements.myarea.getScrollX();
var y = forms.company.elements.myarea.getScrollY();
//sets the new scroll location
forms.company.elements.myarea.setScroll(x+10,y+10);
```

**Example:**

```js
var y = myElement.getScrollY();
```

**Returns:** [Number](/reference/servoycore/dev-api/js-lib/number.md) The y scroll location in pixels.

***

### getSelectedText()

Returns the currently selected text in the specified Html Area.

**Example:**

```js
var my_text = myElement.getSelectedText();
```

**Returns:** [String](/reference/servoycore/dev-api/js-lib/string.md) The selected text in the Html Area.

***

### replaceSelectedText(selectedText)

Replaces the selected text; if no text has been selected, the replaced value will be inserted at the last cursor position.

**Example:**

```js
myElement.replaceSelectedText('John');
```

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} selectedText The replacement text

**Returns:** [String](/reference/servoycore/dev-api/js-lib/string.md) The new content after replace.

***

### requestFocus(mustExecuteOnFocusGainedMethod)

Set the focus to this Html Area.

**Example:**

```js
myElement.requestFocus();
```

**Parameters:**

> * {[Boolean](/reference/servoycore/dev-api/js-lib/boolean.md)} \[mustExecuteOnFocusGainedMethod] If false will not execute the onFocusGained method; the default value is true\[0m

***

### selectAll()

Selects all the contents of the Html Area.

**Example:**

```js
myElement.selectAll();
```

***

### setScroll(x,y)

Sets the scroll location of an element. It takes as input the X (horizontal) and Y (vertical) coordinates - starting from the TOP LEFT side of the screen - only for an element where the height of the element is greater than the height of element content\
NOTE: getScrollX() can be used with getScrollY() to return the current scroll location of an element; then use the X and Y coordinates with the setScroll function to set a new scroll location.

For Example:

```js
//returns the X and Y coordinates
var x = forms.company.elements.myarea.getScrollX();
var y = forms.company.elements.myarea.getScrollY();
//sets the new location
forms.company.elements.myarea.setScroll(x+10,y+10);
```

**Example:**

```js
myElement.setScroll(200,200);
```

**Parameters:**

> * {[Number](/reference/servoycore/dev-api/js-lib/number.md)} x The X coordinate of the htmlarea scroll location in pixels
> * {[Number](/reference/servoycore/dev-api/js-lib/number.md)} y The Y coordinate of the htmlarea scroll location in pixels

***

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.servoy.com/reference/servoyextensions/ui-components/input-control/html-area.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.