ServoyCloudSupportSamplesOpen SourceCommunity

Smart Document Editor

(part of package 'smartDocumentEditor') Extends designtime/SolutionModel: JSWebComponent Extends runtime: RuntimeWebComponent

This is a reference page; many components have detailed usage guides here.

Properties

dataProviderID

Type: Dataprovider

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

Type: String Default Value: null

mentionFeeds

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

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

Type: Boolean Default Value: false

showToolbar

Type: Boolean Default Value: true

styleClass

Type: Styleclass

toolbarItems

Configure toolbar items

Type: Array<CustomType<smartdocumenteditor-smartdocumenteditor.toolbarItem>>

viewType

Type: String Default Value: "DOCUMENT"

visible

Type: Visible

Events

onActionMethodID(event)

Parameters:

onDataChangeMethodID(oldValue,newValue,event)

@return {boolean}

Parameters:

Returns: {Boolean}

onError(errorMessage,errorStack)

Parameters:

onFileUploadedMethodID(file)

Parameters:

onFocusGainedMethodID(event)

Parameters:

onFocusLostMethodID(event)

Parameters:

onReady()

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|null 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<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

scripting type: CustomType<smartdocumenteditor-smartdocumenteditor.mentionFeed>

mentionFeedItem

scripting type: CustomType<smartdocumenteditor-smartdocumenteditor.mentionFeedItem>

toolbar

scripting type: CustomType<smartdocumenteditor-smartdocumenteditor.toolbar>

toolbarItem

scripting type: CustomType<smartdocumenteditor-smartdocumenteditor.toolbarItem>

PreviousSmartDocEditorNextVisualization

Last updated

Was this helpful?