# Html Area

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

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](https://docs.servoy.com/servoy-developer/component_and_service_property_types#dataprovider)

***

### displaysTags

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

***

### editable

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

***

### enabled

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

***

### readOnly

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

***

### responsiveHeight

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

***

### scrollbars

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

***

### styleClass

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

***

### tabSeq

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

***

### text

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

***

### toolTipText

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

***

### visible

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

***

## Events

### onActionMethodID(event)

Fired when an action is triggered in the HTML area.

**Parameters:**

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

***

### onDataChangeMethodID(oldValue,newValue,event)

Fired when the HTML content changes.

**Parameters:**

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

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

***

### onFocusGainedMethodID(event)

Fired when the HTML area gains focus.

**Parameters:**

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

***

### onFocusLostMethodID(event)

Fired when the HTML area loses focus.

**Parameters:**

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

***

### onRightClickMethodID(event)

Fired when the HTML area is right-clicked.

**Parameters:**

> * {[JSEvent](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent)} 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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)} shortCut The shortcut key combination to be added (e.g., 'F9').
> * {[Function](https://docs.servoy.com/servoy-developer/component_and_service_property_types#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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) 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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) 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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) 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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) 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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)} selectedText The replacement text

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

***

### requestFocus(mustExecuteOnFocusGainedMethod)

Set the focus to this Html Area.

**Example:**

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

**Parameters:**

> * {[Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)} \[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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)} x The X coordinate of the htmlarea scroll location in pixels
> * {[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)} y The Y coordinate of the htmlarea scroll location in pixels

***

***