EventHandlers Interface

Declares Rich Text Editor event handlers.

Declaration

export interface EventHandlers

Properties

activeSubDocumentChanged Property

Specifies a handler for the ActiveSubDocumentChanged event.

Declaration

activeSubDocumentChanged?: string | ((s: RichEdit, e: EventArgs) => void)

Property Value

The name of the JavaScript function that handles the event.

| | (s: RichEdit, e: EventArgs) => void |

The JavaScript function that handles the event.

|

Remarks

The ActiveSubDocumentChanged event occurs when an active sub document is changed.

• JS

const options = DevExpress.RichEdit.createOptions();
options.events.activeSubDocumentChanged = function(s,e) { /* your custom actions */ };

autoCorrect Property

Specifies a handler for the AutoCorrect event.

Declaration

autoCorrect?: string | ((s: RichEdit, e: AutoCorrectEventArgs) => void)

Property Value

The name of the JavaScript function that handles the event.

| | (s: RichEdit, e: AutoCorrectEventArgs) => void |

The JavaScript function that handles the event.

|

Remarks

The AutoCorrect event occurs when text is typed in the control. The event handler receives an argument of the AutoCorrectEventArgs type. The argument’s properties provide information specific to this event.

• JS

const options = DevExpress.RichEdit.createOptions();
options.events.autoCorrect = function(s,e) {
  console.log('The inserted text is: ' + e.text);
};

beforeSend Property

Declaration

beforeSend?: string | ((s: RichEdit, e: BeforeSendEventArgs) => void)

Property Value

calculateDocumentVariable Property

Specifies a handler for the CalculateDocumentVariable event.

Declaration

calculateDocumentVariable?: string | ((s: RichEdit, e: CalculateDocumentVariableEventArgs) => void)

Property Value

The name of the JavaScript function that handles the event.

| | (s: RichEdit, e: CalculateDocumentVariableEventArgs) => void |

The JavaScript function that handles the event.

|

Remarks

The CalculateDocumentVariable event occurs when a DOCVARIABLE field is updated. The event handler receives an argument of the CalculateDocumentVariableEventArgs type. The argument’s properties provide information specific to this event.

• JS

const options = DevExpress.RichEdit.createOptions();
options.events.calculateDocumentVariable = function(s,e) {
    if (e.variableName == 'sectionIndex')
        e.value = (s.document.sections.find(e.fieldInterval.start).index + 1).toString();
};

Note

When the CalculateDocumentVariableAsyncEvent event handler is specified, the CalculateDocumentVariable event does not fire.

calculateDocumentVariableAsync Property

Specifies a handler for the CalculateDocumentVariableAsync event.

Declaration

calculateDocumentVariableAsync?: string | ((s: RichEdit, e: CalculateDocumentVariableAsyncEventArgs) => void)

Property Value

The name of the JavaScript function that handles the event.

| | (s: RichEdit, e: CalculateDocumentVariableAsyncEventArgs) => void |

The JavaScript function that handles the event.

|

Remarks

The CalculateDocumentVariableAsync event occurs when occurs when a DOCVARIABLE field is updated. The event handler receives an argument of the CalculateDocumentVariableAsyncEventArgs type. The argument’s properties provide information specific to this event.

• JS

const options = DevExpress.RichEdit.createOptions();
options.events.calculateDocumentVariableAsync = function(s,e){
    e.data.forEach(function(data) {
      data.callback('ResultOf' + data.variableName);
    })
  };

Note

When the CalculateDocumentVariableAsync event handler is specified, the CalculateDocumentVariable event does not fire.

characterPropertiesChanged Property

Specifies a handler for the CharacterPropertiesChanged event.

Declaration

characterPropertiesChanged?: string | ((s: RichEdit, e: ContentChangedEventArgs) => void)

Property Value

The name of the JavaScript function that handles the event.

| | (s: RichEdit, e: ContentChangedEventArgs) => void |

The JavaScript function that handles the event.

|

Remarks

The CharacterPropertiesChanged event occurs when the characters’ formatting is changed. The event handler receives an argument of the ContentChangedEventArgs type. The argument’s properties provide information specific to this event.

• JS

const options = DevExpress.RichEdit.createOptions();
options.events.characterPropertiesChanged = function(s,e) { /* your custom actions */ };

commandStateChanged Property

Specifies a handler for the CommandStateChanged event.

Declaration

commandStateChanged?: string | ((s: RichEdit, e: CommandStateChangedEventArgs) => void)

Property Value

The name of the JavaScript function that handles the event.

| | (s: RichEdit, e: CommandStateChangedEventArgs) => void |

The JavaScript function that handles the event.

|

Remarks

The CommandStateChanged event occurs after a command state has been changed. The event handler receives an argument of the CommandStateChangedEventArgs type. The argument’s properties provide information specific to this event.

• JS

const options = DevExpress.RichEdit.createOptions();
options.events.commandStateChanged = function(s,e) { /* your custom actions */ };

contentInserted Property

Specifies a handler for the ContentInserted event.

Declaration

contentInserted?: string | ((s: RichEdit, e: ContentChangedEventArgs) => void)

Property Value

The name of the JavaScript function that handles the event.

| | (s: RichEdit, e: ContentChangedEventArgs) => void |

The JavaScript function that handles the event.

|

Remarks

The ContentInserted event occurs when content is inserted into the document. The event handler receives an argument of the ContentChangedEventArgs type. The argument’s properties provide information specific to this event.

• JS

const options = DevExpress.RichEdit.createOptions();
options.events.contentInserted = function(s,e) {
  console.log('The inserted text is: ' + s.document.getText(e.interval));
};

contentRemoved Property

Specifies a handler for the ContentRemoved event.

Declaration

contentRemoved?: string | ((s: RichEdit, e: ContentRemovedEventArgs) => void)

Property Value

The name of the JavaScript function that handles the event.

| | (s: RichEdit, e: ContentRemovedEventArgs) => void |

The JavaScript function that handles the event.

|

Remarks

The ContentRemoved event occurs when content is removed from the document. The event handler receives an argument of the ContentRemovedEventArgs type. The argument’s properties provide information specific to this event.

• JS

const options = DevExpress.RichEdit.createOptions();
options.events.contentRemoved = function(s,e) {
  console.log('The removed text is: ' + e.removedText);
};

contextMenuShowing Property

Specifies a handler for the ContextMenuShowing event.

Declaration

contextMenuShowing?: string | ((s: RichEdit, e: ContextMenuShowingEventArgs) => void)

Property Value

The name of the JavaScript function that handles the event.

| | (s: RichEdit, e: ContextMenuShowingEventArgs) => void |

The JavaScript function that handles the event.

|

Remarks

The ContextMenuShowing event occurs before the context menu is displayed. The event handler receives an argument of the ContextMenuShowingEventArgs type. The argument’s properties provide information specific to this event.

• JS

const options = DevExpress.RichEdit.createOptions();
options.events.contextMenuShowing = function(s,e) {
  var characterProperties = s.selection.activeSubDocument.getCharacterProperties(s.selection.intervals[0]);
  if (characterProperties.bold === true || characterProperties.bold === undefined) {
    e.contextMenu.removeItem(DevExpress.RichEdit.ContextMenuCommandId.Copy);
    e.contextMenu.removeItem(DevExpress.RichEdit.ContextMenuCommandId.Paste);
    e.contextMenu.removeItem(DevExpress.RichEdit.ContextMenuCommandId.Cut);
    e.contextMenu.insertItem(new DevExpress.RichEdit.ContextMenuItem('CutCopy', {
      icon: 'close', text: 'Copy Paste Disabled', disabled: true
    }), 1);
  }
};

customCommandExecuted Property

Specifies a handler for the CustomCommandExecuted event.

Declaration

customCommandExecuted?: string | ((s: RichEdit, e: CustomCommandExecutedEventArgs) => void)

Property Value

The name of the JavaScript function that handles the event.

| | (s: RichEdit, e: CustomCommandExecutedEventArgs) => void |

The JavaScript function that handles the event.

|

Remarks

The CustomCommandExecuted event occurs after a custom command has been executed on the client side. The event handler receives an argument of the CustomCommandExecutedEventArgs type. The argument’s properties provide information specific to this event.

• JS

const options = DevExpress.RichEdit.createOptions();
options.events.customCommandExecuted = function(s,e) {
  switch (e.commandName) {
    case 'sendEmail':
      var text = s.document.getText();
      var mailto_link = 'mailto:[email protected]?subject=Test&body=' + encodeURIComponent(text);
      window = window.open(mailto_link, 'emailWindow');
      if(window && window.open && !window.closed)
        window.close();
      break;
  }
};

See Also

How to: Create 'Change Image Size' ribbon items

documentChanged Property

Specifies a handler for the DocumentChanged event.

Declaration

documentChanged?: string | ((s: RichEdit, e: EventArgs) => void)

Property Value

The name of the JavaScript function that handles the event.

| | (s: RichEdit, e: EventArgs) => void |

The JavaScript function that handles the event.

|

Remarks

The DocumentChanged event occurs if any change is made in the document.

• JS

const options = DevExpress.RichEdit.createOptions();
options.events.documentChanged = function(s,e) {
  console.log('The document has been changed.');
};

documentFormatted Property

Specifies a handler for the DocumentFormatted event.

Declaration

documentFormatted?: string | ((s: RichEdit, e: DocumentFormattedEventArgs) => void)

Property Value

The name of the JavaScript function that handles the event.

| | (s: RichEdit, e: DocumentFormattedEventArgs) => void |

The JavaScript function that handles the event.

|

Remarks

The DocumentFormatted event occurs when a document layout is formatted. The event handler receives an argument of the DocumentFormattedEventArgs type. The argument’s properties provide information specific to this event.

• JS

const options = DevExpress.RichEdit.createOptions();
options.events.documentFormatted = function(s,e) {
  console.log('The document contains ' + e.pageCount + ' page(s).');
};

documentLoaded Property

Specifies a handler for the DocumentLoaded event.

Declaration

documentLoaded?: string | ((s: RichEdit, e: EventArgs) => void)

Property Value

The name of the JavaScript function that handles the event.

| | (s: RichEdit, e: EventArgs) => void |

The JavaScript function that handles the event.

|

Remarks

The DocumentLoaded event occurs when a document model is loaded into the control.

• JS

const options = DevExpress.RichEdit.createOptions();
options.events.documentLoaded = function(s,e) {
  s.document.insertText(0, 'Dear Mr Stanley,');
  s.document.insertParagraph(s.document.length);
  var startPosition = s.document.length;
  s.document.insertParagraph(startPosition);
  s.document.insertText(startPosition, '[Type your text here]');
  s.selection.setSelection(new DevExpress.RichEdit.Interval(startPosition, s.document.length - startPosition));
  s.focus();
};

gotFocus Property

Specifies a handler for the GotFocus event.

Declaration

gotFocus?: string | ((s: RichEdit, e: EventArgs) => void)

Property Value

The name of the JavaScript function that handles the event.

| | (s: RichEdit, e: EventArgs) => void |

The JavaScript function that handles the event.

|

Remarks

The GotFocus event occurs when the control receives focus.

• JS

const options = DevExpress.RichEdit.createOptions();
options.events.gotFocus = function(s,e) { /* your custom actions */ };

hyperlinkClick Property

Specifies a handler for the HyperlinkClick event.

Declaration

hyperlinkClick?: string | ((s: RichEdit, e: HyperlinkClickEventArgs) => void)

Property Value

The name of the JavaScript function that handles the event.

| | (s: RichEdit, e: HyperlinkClickEventArgs) => void |

The JavaScript function that handles the event.

|

Remarks

The HyperlinkClick event occurs when a hyperlink is clicked. The event handler receives an argument of the HyperlinkClickEventArgs type. The argument’s properties provide information specific to this event.

• JS

const options = DevExpress.RichEdit.createOptions();
options.events.hyperlinkClick = function(s,e) {
  console.log('Navigates to ' + e.hyperlink.hyperlinkInfo.url);
};

keyDown Property

Specifies a handler for the KeyDown event.

Declaration

keyDown?: string | ((s: RichEdit, e: KeyboardEventArgs) => void)

Property Value

The name of the JavaScript function that handles the event.

| | (s: RichEdit, e: KeyboardEventArgs) => void |

The JavaScript function that handles the event.

|

Remarks

The KeyDown event occurs when a key is pressed while the RichEdit’s document has focus. The event handler receives an argument of the KeyboardEventArgs type. The argument’s properties provide information specific to this event.

• JS

const options = DevExpress.RichEdit.createOptions();
options.events.keyDown = function(s,e) {
  console.log('The pressed key is: ' + e.htmlEvent.key);
};

keyUp Property

Specifies a handler for the KeyUp event.

Declaration

keyUp?: string | ((s: RichEdit, e: KeyboardEventArgs) => void)

Property Value

The name of the JavaScript function that handles the event.

| | (s: RichEdit, e: KeyboardEventArgs) => void |

The JavaScript function that handles the event.

|

Remarks

The KeyUp event occurs when a key is released while the RichEdit’s document has focus. The event handler receives an argument of the KeyboardEventArgs type. The argument’s properties provide information specific to this event.

• JS

const options = DevExpress.RichEdit.createOptions();
options.events.keyUp = function(s,e) {
  console.log('The released key is: ' + e.htmlEvent.key);
};

lostFocus Property

Specifies a handler for the LostFocus event.

Declaration

lostFocus?: string | ((s: RichEdit, e: EventArgs) => void)

Property Value

The name of the JavaScript function that handles the event.

| | (s: RichEdit, e: EventArgs) => void |

The JavaScript function that handles the event.

|

Remarks

The LostFocus event occurs when the control loses focus.

• JS

const options = DevExpress.RichEdit.createOptions();
options.events.lostFocus = function(s,e) { /* your custom actions */ };

paragraphPropertiesChanged Property

Specifies a handler for the ParagraphPropertiesChanged event.

Declaration

paragraphPropertiesChanged?: string | ((s: RichEdit, e: ParagraphPropertiesChangedEventArgs) => void)

Property Value

The name of the JavaScript function that handles the event.

| | (s: RichEdit, e: ParagraphPropertiesChangedEventArgs) => void |

The JavaScript function that handles the event.

|

Remarks

The ParagraphPropertiesChanged event occurs when a paragraph’s formatting is changed. The event handler receives an argument of the ParagraphPropertiesChangedEventArgs type. The argument’s properties provide information specific to this event.

• JS

const options = DevExpress.RichEdit.createOptions();
options.events.paragraphPropertiesChanged = function(s,e) { /* your custom actions */ };

pdfExported Property

Specifies a handler for the PdfExported event.

Declaration

pdfExported?: string | ((s: RichEdit, e: PdfExportedEventArgs) => void)

Property Value

The name of the JavaScript function that handles the event.

| | (s: RichEdit, e: PdfExportedEventArgs) => void |

The JavaScript function that handles the event.

|

Remarks

The PdfExported event occurs after an exported PDF document is processed on the server side. The event handler receives an argument of the PdfExportedEventArgs type. The argument’s properties provide information specific to this event.

• JS

const options = DevExpress.RichEdit.createOptions();
options.events.pdfExported = function(s,e) {
  if (e.success)
    console.log('The PDF document is successfully processed on the server.');
};

pdfExporting Property

Specifies a handler for the PdfExporting event.

Declaration

pdfExporting?: string | ((s: RichEdit, e: PdfExportingEventArgs) => void)

Property Value

The name of the JavaScript function that handles the event.

| | (s: RichEdit, e: PdfExportingEventArgs) => void |

The JavaScript function that handles the event.

|

Remarks

The PdfExporting event occurs after the exportToPdf method was called and allows you to save an exported PDF document. The event handler receives an argument of the PdfExportingEventArgs type. The argument’s properties provide information specific to this event.

• JS

const options = DevExpress.RichEdit.createOptions();
options.events.pdfExporting = function(s,e) {
    e.handled = true;
    console.log(e.base64);
};

See Also

Export to PDF

pointerDown Property

Specifies a handler for the PointerDown event.

Declaration

pointerDown?: string | ((s: RichEdit, e: PointerEventArgs) => void)

Property Value

The name of the JavaScript function that handles the event.

| | (s: RichEdit, e: PointerEventArgs) => void |

The JavaScript function that handles the event.

|

Remarks

For a mouse pointer, the PointerDown event occurs when a user presses a mouse button or wheel while the mouse pointer is over the Rich Text Editor. For touch and pen pointers, this event occurs when a pointer contacts a digitizer.

The event handler receives an argument of the PointerEventArgs type. The argument’s properties provide information specific to this event.

• JS

const options = DevExpress.RichEdit.createOptions();
options.events.pointerDown = function(s,e) { /* your custom actions */ };

pointerUp Property

Specifies a handler for the PointerUp event.

Declaration

pointerUp?: string | ((s: RichEdit, e: PointerEventArgs) => void)

Property Value

The name of the JavaScript function that handles the event.

| | (s: RichEdit, e: PointerEventArgs) => void |

The JavaScript function that handles the event.

|

Remarks

For a mouse pointer, the PointerUp event occurs when a user releases a mouse button or wheel while the mouse pointer is over the Rich Text Editor. For touch and pen pointers, this event occurs when a pointer stops physical contact with a digitizer.

The event handler receives an argument of the PointerEventArgs type. The argument’s properties provide information specific to this event.

• JS

const options = DevExpress.RichEdit.createOptions();
options.events.pointerUp = function(s,e) { /* your custom actions */ };

saved Property

Specifies a handler for the Saved event.

Declaration

saved?: string | ((s: RichEdit, e: SavedEventArgs) => void)

Property Value

The name of the JavaScript function that handles the event.

| | (s: RichEdit, e: SavedEventArgs) => void |

The JavaScript function that handles the event.

|

Remarks

The Saved event occurs after a document is saved on the server side. The event handler receives an argument of the SavedEventArgs type. The argument’s properties provide information specific to this event.

• JS

const options = DevExpress.RichEdit.createOptions();
options.events.saved = function(s,e) {
  if (e.success)
    console.log('The document is successfully processed on the server.');
};

saving Property

Specifies a handler for the SavingEvent event.

Declaration

saving?: string | ((s: RichEdit, e: SavingEventArgs) => void)

Property Value

The name of the JavaScript function that handles the event.

| | (s: RichEdit, e: SavingEventArgs) => void |

The JavaScript function that handles the event.

|

Remarks

The SavingEvent event allows you to save a document. The event handler receives an argument of the SavingEventArgs type. The argument’s properties provide information specific to this event.

• JS

const options = DevExpress.RichEdit.createOptions();
options.events.saving = function(s,e) {
  e.handled = true;
  console.log(e.base64);
  console.log(e.fileName);
  console.log(e.format);
};

selectionChanged Property

Specifies a handler for the SelectionChanged event.

Declaration

selectionChanged?: string | ((s: RichEdit, e: EventArgs) => void)

Property Value

The name of the JavaScript function that handles the event.

| | (s: RichEdit, e: EventArgs) => void |

The JavaScript function that handles the event.

|

Remarks

The SelectionChanged event occurs when selection is changed in the document.

• JS

const options = DevExpress.RichEdit.createOptions();
options.events.selectionChanged = function(s,e) {
  console.log('The current position is ' + s.selection.active);
};

See Also

How to: Create 'Change Image Size' ribbon items