close

Filter

loading table of contents...

Studio Developer Manual / Version 2304

Table Of Contents

10.2.2.7 Interacting with the CKEditor 4 via API

If you want to interact with CKEditor 4 without writing a CKEditor 4 plugin, you can add a standard Ext JS action to the toolbar of the RichTextPropertyField. To gain access to CKEditor 4 you have to create a class for your action and add the following config parameter

ckEditorValueExpression:ValueExpression;

The injected editor object is of type CKEDITOR.editor (see CKEditor 4 API docs) and can be used according to your needs.

However, there are two things to consider when writing your own custom actions:

  • Undo / Redo: In order to be able to undo / redo the changes your action has made, you have to send one saveSnapshot event before and one after making the changes, like so:

    this.editor.fire('saveSnapshot');
    // perform changes ...
    this.editor.fire('saveSnapshot');
  • Saving Changes: In order to update the bound content with the changes your action has made, it may be necessary to send an additional save event. This event is recognized by the property field, which will then trigger the update. CKEditor 4 already tracks changes and the property field will react to it, but in some cases this is impossible. You should check if the content gets checked-out when your action is performed, and if not add the following code:

    // perform changes ...
    editor.fire('save');

Search Results

Table Of Contents
warning

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.