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:
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:
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:
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:
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:
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:
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
Last updated
Was this helpful?