# Smart Document Editor

(part of package '[smartDocumentEditor](/reference/servoyextensions/packages/ui-component-packages/smartdocumenteditor.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 document editor with advanced formatting capabilities.

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 document content. Type: [Dataprovider](/reference/servoy-developer/component_and_service_property_types.md#dataprovider)

***

### editable

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

***

### editorStyleSheet

Attach a style sheet to add or overwrite content styles used by the editor. Make sure to prefix all classes with the `.ck-content` class. Type: [Media](/reference/servoy-developer/component_and_service_property_types.md#media)

***

### language

The language used in the editor. Type: [String](/reference/servoycore/dev-api/js-lib/string.md) Default Value: null

***

### mentionFeeds

Array of mention feed configurations for the editor. Each mention feed defines a marker and associated feed items for quick insertion. Type: [Array\<CustomType\<smartdocumenteditor-smartdocumenteditor.mentionFeed>>](#mentionfeed)

***

### minHeight

Editor's min height. It's none by default. So when you want the height to be resposive and would like to have a min height for the editor, set responsiveHeight as 0 and this property with the value that fits your needs. Type: [Number](/reference/servoycore/dev-api/js-lib/number.md) Default Value: null

***

### overWriteTabForEditor

Flag indicating whether to overwrite the default tab behavior for the editor. Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) Default Value: true

***

### responsiveHeight

Editor's height to be set in a responsive form. When responsiveHeight is set to 0, the editor will use 100% height of the parent container. When value is set to -1 it will be based on the content. Type: [Number](/reference/servoycore/dev-api/js-lib/number.md) Default Value: 500

***

### showInspector

Flag indicating whether the inspector is shown. (Deprecated in later versions.) Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) Default Value: false

***

### showToolbar

Flag indicating whether the toolbar is visible. Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) Default Value: true

***

### styleClass

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

***

### toolbarItems

Configure toolbar items Type: [Array\<CustomType\<smartdocumenteditor-smartdocumenteditor.toolbarItem>>](#toolbaritem)

***

### viewType

The view type of the editor. Possible values are "WEB" or "DOCUMENT". Type: [String](/reference/servoycore/dev-api/js-lib/string.md) Default Value: "DOCUMENT"

***

### visible

Flag indicating whether the editor 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 editor.

**Parameters:**

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

***

### onDataChangeMethodID(oldValue,newValue,event)

Fired when the editor's data changes.

**Parameters:**

> * {[${dataproviderType}](/reference/servoy-developer/component_and_service_property_types.md#dataprovider)} oldValue The previous document content.
> * {[${dataproviderType}](/reference/servoy-developer/component_and_service_property_types.md#dataprovider)} newValue The new document 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)}

***

### onError(errorMessage,errorStack)

Fired when an error occurs in the editor.

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} errorMessage The error message.
> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} errorStack The error stack trace.

***

### onFileUploadedMethodID(file)

Fired when a file is uploaded through the editor.

**Parameters:**

> * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} file The file object that was uploaded.

***

### onFocusGainedMethodID(event)

Fired when the editor gains focus.

**Parameters:**

> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object associated with the focus gain.

***

### onFocusLostMethodID(event)

Fired when the editor loses focus.

**Parameters:**

> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object associated with the focus loss.

***

### onReady()

Fired when the editor is fully initialized and ready.

***

## API

### addInputAtCursor(input)

Add input to current cursor position, will return false when in readOnly mode

**Example:**

```js
elements.myElement.addInputAtCursor(input);
```

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} input The text or input content to insert at the current cursor position.

**Returns:** [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) True if the input was successfully added; false if the editor is in readOnly mode.

***

### addTagAtCursor(marker,tag)

Add tag to current cursor position, will return false when in readOnly mode

**Example:**

```js
elements.myElement.addTagAtCursor(tag);
```

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} marker The prefix marker (e.g., '@', '#') to associate with the tag.
> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} tag The tag content to insert at the current cursor position.

**Returns:** [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) True if the tag was successfully added; false if the editor is in readOnly mode.

***

### create(config)

(Re-)Creates the editor using the given config

**Example:**

```js
elements.myElement.create(config, onSuccess, onError);
```

**Parameters:**

> * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} config The configuration object containing settings for initializing or reinitializing the editor.

***

### createToolbarItem(name,onClick)

Returns a toolbarItem that can be provided as one of the toolbar items on a toolbar property of an editor's config

**Example:**

```js
elements.myElement.createToolbarItem(name, onClick);
```

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} name The (unique) name of this toolbar item
> * {[Function](/reference/servoy-developer/component_and_service_property_types.md#function)} onClick The callback method to fire when the item is clicked

**Returns:** [CustomType\<smartdocumenteditor-smartdocumenteditor.toolbarItem>](#toolbaritem) A toolbar item object that can be used in the editor's toolbar configuration.

***

### executeCommand(command,commandParameters)

Executes the specified command with given parameters.

**Example:**

```js
elements.myElement.executeCommand(command, commandParameters);
```

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} command The name of the command to execute
> * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} \[commandParameters] Optional command parameters

***

### getCSSData(filterStylesheetName)

Retrieves the CSS styles applied to the editor.\
Optionally filters the styles based on a provided stylesheet name.

**Example:**

```js
// Get all CSS styles used in the editor
var cssData = elements.myElement.getCSSData();

// Get CSS styles from a specific stylesheet
var filteredCssData = elements.myElement.getCSSData('editorStylesheet.css');
```

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} \[filterStylesheetName] The name of the stylesheet to filter styles. If omitted, all styles are returned.

**Returns:** [String](/reference/servoycore/dev-api/js-lib/string.md) A string containing the CSS styles.

***

### getHTMLData(withInlineCSS,filterStylesheetName)

Retrieves the HTML content of the editor, optionally including inline CSS styles.

**Example:**

```js
// Get HTML content with inline CSS applied
var htmlData = elements.myElement.getHTMLData(true, 'editorStylesheet.css');
```

**Parameters:**

> * {[Boolean](/reference/servoycore/dev-api/js-lib/boolean.md)} \[withInlineCSS] Specifies whether to include inline CSS styles in the HTML content.
> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} \[filterStylesheetName] The name of the stylesheet to filter the inline styles (if withInlineCSS is true).

**Returns:** [String](/reference/servoycore/dev-api/js-lib/string.md) The HTML content of the editor, or null if the editor instance is not initialized.

***

### getPrintCSSData()

Retrieves the CSS content used for printing the editor's content.

**Example:**

```js
// Get the print CSS styles
var printCss = elements.myElement.getPrintCSSData();
```

**Returns:** [String](/reference/servoycore/dev-api/js-lib/string.md) The CSS content used for printing.

***

### insertImage(source)

Inserts an image into the current cursor position within the editor.

**Example:**

```js
// Insert an image into the editor
elements.myElement.insertImage('https://example.com/image.png');
```

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} source A path to a valid image accessible from the editor's context.

***

### isInPreviewMode()

Return if the editor is in preview mode (CKEditor readOnly).

**@public**

**Returns:** [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) True if the editor is in preview (readOnly) mode; otherwise, false.

***

### previewHTML(html,readOnly)

Preview Editor HTML data into the editor

**@public**

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} html The HTML content to display in the editor preview.
> * {[Boolean](/reference/servoycore/dev-api/js-lib/boolean.md)} \[readOnly] Set the editor to readOnly mode (default: true).

***

### requestFocus()

Request the focus to this editor.

**Example:**

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

***

### saveData()

Force the autosave trigger of the editor to get all latest changes

**Example:**

```js
dataprovider = elements.myElement.saveData();
```

**Returns:** [Object](/reference/servoycore/dev-api/js-lib/object.md) The data currently in the editor.

***

### setMentionFeeds(mentionFeeds)

Sets the mention feeds for the editor, allowing users to insert predefined mentions into the document.\
Mention feeds provide a way to define markers and associated content for quick insertion, such as tagging users or inserting placeholders.

**Example:**

```js
// Set mention feeds for the editor
var mentionFeeds = [
    { marker: '@', valueList: 'userList', feedItems: [{ displayValue: 'John Doe', realValue: 'john_doe' }] },
    { marker: '#', valueList: 'tagList', feedItems: [{ displayValue: 'ProjectX', realValue: 'project_x' }] }
];
elements.myElement.setMentionFeeds(mentionFeeds);
```

**Parameters:**

> * {[Array\<CustomType\<smartdocumenteditor-smartdocumenteditor.mentionFeed>>](#mentionfeed)} mentionFeeds An array of mention feed configurations. Each mention feed defines a marker (e.g., '@' or '#') and the associated feed items or value lists to provide options for insertion.

***

### undoPreviewHTML(readOnly)

Undo Preview Editor HTML data into the editor

**@public**

**Parameters:**

> * {[Boolean](/reference/servoycore/dev-api/js-lib/boolean.md)} \[readOnly] Set component into readOnly mode (default: false)

***

## Types

## mentionFeed

Represents a mention feed configuration for the editor. scripting type: CustomType\<smartdocumenteditor-smartdocumenteditor.mentionFeed>

* feedItems
  * Array of mention feed items.
  * **Type**: [mentionFeedItem\[\]](#mentionfeeditem)
* itemEditable
  * Flag indicating whether items in the mention feed are editable.
  * **Type**: [boolean](/reference/servoycore/dev-api/js-lib/boolean.md)
  * **Default Value**: false
* marker
  * Marker used to trigger the mention feed (e.g. '@' or '#').
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
* minimumCharacters
  * Minimum number of characters required before triggering the mention feed.
  * **Type**: [int](/reference/servoycore/dev-api/js-lib/number.md)
* valueList
  * Identifier for the value list providing options for the mention feed.
  * **Type**: [valuelist](/reference/servoy-developer/component_and_service_property_types.md#valuelist)

## mentionFeedItem

Represents an individual mention feed item. scripting type: CustomType\<smartdocumenteditor-smartdocumenteditor.mentionFeedItem>

* displayValue
  * The display value of the mention feed item.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
* format
  * Format string for displaying the mention feed item.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
* realValue
  * The actual value associated with the mention feed item.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)

## toolbar

Represents the toolbar configuration for the editor. scripting type: CustomType\<smartdocumenteditor-smartdocumenteditor.toolbar>

* items
  * Array of toolbar items.
  * **Type**: [toolbarItem\[\]](#toolbaritem)
* shouldNotGroupWhenFull
  * Flag indicating whether toolbar items should not be grouped when the toolbar is full.
  * **Type**: [boolean](/reference/servoycore/dev-api/js-lib/boolean.md)
  * **Default Value**: false

## toolbarItem

Represents a single toolbar item in the editor. scripting type: CustomType\<smartdocumenteditor-smartdocumenteditor.toolbarItem>

* iconStyleClass
  * CSS style classes applied to the toolbar item's icon.
  * **Type**: [styleclass](/reference/servoy-developer/component_and_service_property_types.md#styleclass)
* ignoreReadOnly
  * When true, the toolbar item ignores the editor's readOnly state.
  * **Type**: [boolean](/reference/servoycore/dev-api/js-lib/boolean.md)
* isEnabled
  * Flag indicating whether the toolbar item is enabled.
  * **Type**: [boolean](/reference/servoycore/dev-api/js-lib/boolean.md)
  * **Default Value**: true
* keystroke
  * The keystroke associated with the toolbar item.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
* label
  * Label text for the toolbar item.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
* name
  * Unique name of the toolbar item.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
* onClick
  * Function to be called when the toolbar item is clicked.
  * **Type**: [function](/reference/servoy-developer/component_and_service_property_types.md#function)
* styleClass
  * CSS style classes applied to the toolbar item.
  * **Type**: [styleclass](/reference/servoy-developer/component_and_service_property_types.md#styleclass)
* tooltip
  * Tooltip text for the toolbar item.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
* type
  * The type of the toolbar item (e.g. bold, italic, fontSize, etc.).
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
  * **Default Value**: null
* valueList
  * Value list providing options for the toolbar item.
  * **Type**: [valuelist](/reference/servoy-developer/component_and_service_property_types.md#valuelist)
* withText
  * When true, the toolbar item displays both an icon and text.
  * **Type**: [boolean](/reference/servoycore/dev-api/js-lib/boolean.md)
* withTooltip
  * When true, the toolbar item shows a tooltip.
  * **Type**: [boolean](/reference/servoycore/dev-api/js-lib/boolean.md)

***


---

# 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/smartdoceditor/smart-document-editor.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.