# Smart Document Editor

(part of package '[smartDocumentEditor](https://docs.servoy.com/reference/servoyextensions/packages/ui-component-packages/smartdocumenteditor)')\
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 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](https://docs.servoy.com/servoy-developer/component_and_service_property_types#dataprovider)

***

### editable

Flag indicating whether the editor content is editable. Type: [Protected](https://docs.servoy.com/servoy-developer/component_and_service_property_types#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](https://docs.servoy.com/servoy-developer/component_and_service_property_types#media)

***

### language

The language used in the editor. Type: [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) 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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) Default Value: null

***

### overWriteTabForEditor

Flag indicating whether to overwrite the default tab behavior for the editor. Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) 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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) Default Value: 500

***

### showInspector

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

***

### showToolbar

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

***

### styleClass

CSS style classes applied to the editor component. Type: [Styleclass](https://docs.servoy.com/servoy-developer/component_and_service_property_types#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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) Default Value: "DOCUMENT"

***

### visible

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

**Parameters:**

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

***

### onDataChangeMethodID(oldValue,newValue,event)

Fired when the editor's data changes.

**Parameters:**

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

***

### onError(errorMessage,errorStack)

Fired when an error occurs in the editor.

**Parameters:**

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

***

### onFileUploadedMethodID(file)

Fired when a file is uploaded through the editor.

**Parameters:**

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

***

### onFocusGainedMethodID(event)

Fired when the editor gains focus.

**Parameters:**

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

***

### onFocusLostMethodID(event)

Fired when the editor loses focus.

**Parameters:**

> * {[JSEvent](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent)} 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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)} input The text or input content to insert at the current cursor position.

**Returns:** [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) 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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)} marker The prefix marker (e.g., '@', '#') to associate with the tag.
> * {[String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)} tag The tag content to insert at the current cursor position.

**Returns:** [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) 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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object)} 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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)} name The (unique) name of this toolbar item
> * {[Function](https://docs.servoy.com/servoy-developer/component_and_service_property_types#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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)} command The name of the command to execute
> * {[Object](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object)} \[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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)} \[filterStylesheetName] The name of the stylesheet to filter styles. If omitted, all styles are returned.

**Returns:** [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) 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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)} \[withInlineCSS] Specifies whether to include inline CSS styles in the HTML content.
> * {[String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)} \[filterStylesheetName] The name of the stylesheet to filter the inline styles (if withInlineCSS is true).

**Returns:** [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) 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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) 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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)} 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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) True if the editor is in preview (readOnly) mode; otherwise, false.

***

### previewHTML(html,readOnly)

Preview Editor HTML data into the editor

**@public**

**Parameters:**

> * {[String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)} html The HTML content to display in the editor preview.
> * {[Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)} \[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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/object) 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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)} \[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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)
  * **Default Value**: false
* marker
  * Marker used to trigger the mention feed (e.g. '@' or '#').
  * **Type**: [string](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)
* minimumCharacters
  * Minimum number of characters required before triggering the mention feed.
  * **Type**: [int](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)
* valueList
  * Identifier for the value list providing options for the mention feed.
  * **Type**: [valuelist](https://docs.servoy.com/servoy-developer/component_and_service_property_types#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](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)
* format
  * Format string for displaying the mention feed item.
  * **Type**: [string](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)
* realValue
  * The actual value associated with the mention feed item.
  * **Type**: [string](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)

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

***