Smart Document Editor

(part of package 'smartDocumentEditor') Extends designtime/SolutionModel: JSWebComponent Extends runtime: 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.

Properties

dataProviderID

Bound data provider identifier for the document content. Type: Dataprovider

---

editable

Flag indicating whether the editor content is editable. Type: 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

---

language

The language used in the editor. Type: 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>>

---

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 Default Value: null

---

overWriteTabForEditor

Flag indicating whether to overwrite the default tab behavior for the editor. Type: 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 Default Value: 500

---

showInspector

Flag indicating whether the inspector is shown. (Deprecated in later versions.) Type: Boolean Default Value: false

---

showToolbar

Flag indicating whether the toolbar is visible. Type: Boolean Default Value: true

---

styleClass

CSS style classes applied to the editor component. Type: Styleclass

---

toolbarItems

Configure toolbar items Type: Array<CustomType<smartdocumenteditor-smartdocumenteditor.toolbarItem>>

---

viewType

The view type of the editor. Possible values are "WEB" or "DOCUMENT". Type: String Default Value: "DOCUMENT"

---

visible

Flag indicating whether the editor is visible. Type: Visible

---

Events

onActionMethodID(event)

Fired when an action is triggered in the editor.

Parameters:

• {JSEvent} event The event object associated with the action.

---

onDataChangeMethodID(oldValue,newValue,event)

Fired when the editor's data changes.

Parameters:

• {${dataproviderType}} oldValue The previous document content.
• {${dataproviderType}} newValue The new document content.
• {JSEvent} event The event object associated with the data change.

Returns: {Boolean}

---

onError(errorMessage,errorStack)

Fired when an error occurs in the editor.

Parameters:

• {String} errorMessage The error message.
• {String} errorStack The error stack trace.

---

onFileUploadedMethodID(file)

Fired when a file is uploaded through the editor.

Parameters:

• {Object} file The file object that was uploaded.

---

onFocusGainedMethodID(event)

Fired when the editor gains focus.

Parameters:

• {JSEvent} event The event object associated with the focus gain.

---

onFocusLostMethodID(event)

Fired when the editor loses focus.

Parameters:

• {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:

elements.myElement.addInputAtCursor(input);

Parameters:

• {String} input The text or input content to insert at the current cursor position.

Returns: 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:

elements.myElement.addTagAtCursor(tag);

Parameters:

• {String} marker The prefix marker (e.g., '@', '#') to associate with the tag.
• {String} tag The tag content to insert at the current cursor position.

Returns: 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:

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

Parameters:

• {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:

elements.myElement.createToolbarItem(name, onClick);

Parameters:

• {String} name The (unique) name of this toolbar item
• {Function} onClick The callback method to fire when the item is clicked

Returns: CustomType<smartdocumenteditor-smartdocumenteditor.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:

elements.myElement.executeCommand(command, commandParameters);

Parameters:

• {String} command The name of the command to execute
• {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:

// 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} [filterStylesheetName] The name of the stylesheet to filter styles. If omitted, all styles are returned.

Returns: String A string containing the CSS styles.

---

getHTMLData(withInlineCSS,filterStylesheetName)

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

Example:

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

Parameters:

• {Boolean} [withInlineCSS] Specifies whether to include inline CSS styles in the HTML content.
• {String} [filterStylesheetName] The name of the stylesheet to filter the inline styles (if withInlineCSS is true).

Returns: 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:

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

Returns: String The CSS content used for printing.

---

insertImage(source)

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

Example:

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

Parameters:

• {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 True if the editor is in preview (readOnly) mode; otherwise, false.

---

previewHTML(html,readOnly)

Preview Editor HTML data into the editor

@public

Parameters:

• {String} html The HTML content to display in the editor preview.
• {Boolean} [readOnly] Set the editor to readOnly mode (default: true).

---

requestFocus()

Request the focus to this editor.

Example:

myElement.requestFocus();

---

saveData()

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

Example:

dataprovider = elements.myElement.saveData();

Returns: 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:

// 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>>} 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} [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[]
• itemEditable

  • Flag indicating whether items in the mention feed are editable.

  • Type: boolean
  • Default Value: false

• marker

  • Marker used to trigger the mention feed (e.g. '@' or '#').

  • Type: string
• minimumCharacters

  • Minimum number of characters required before triggering the mention feed.

  • Type: int
• valueList

  • Identifier for the value list providing options for the mention feed.

  • Type: 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
• format

  • Format string for displaying the mention feed item.

  • Type: string
• realValue

  • The actual value associated with the mention feed item.

  • Type: string

toolbar

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

• items

  • Array of toolbar items.

  • Type: toolbarItem[]
• shouldNotGroupWhenFull

  • Flag indicating whether toolbar items should not be grouped when the toolbar is full.

  • Type: 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
• ignoreReadOnly

  • When true, the toolbar item ignores the editor's readOnly state.

  • Type: boolean
• isEnabled

  • Flag indicating whether the toolbar item is enabled.

  • Type: boolean
  • Default Value: true

• keystroke

  • The keystroke associated with the toolbar item.

  • Type: string
• label

  • Label text for the toolbar item.

  • Type: string
• name

  • Unique name of the toolbar item.

  • Type: string
• onClick

  • Function to be called when the toolbar item is clicked.

  • Type: function
• styleClass

  • CSS style classes applied to the toolbar item.

  • Type: styleclass
• tooltip

  • Tooltip text for the toolbar item.

  • Type: string
• type

  • The type of the toolbar item (e.g. bold, italic, fontSize, etc.).

  • Type: string
  • Default Value: null

• valueList

  • Value list providing options for the toolbar item.

  • Type: valuelist
• withText

  • When true, the toolbar item displays both an icon and text.

  • Type: boolean
• withTooltip

  • When true, the toolbar item shows a tooltip.

  • Type: boolean

---