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:

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:


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

  • 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

  • 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.

  • 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.

  • 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


Last updated

Was this helpful?