Extending the Ephox Editors with Custom JavaScript

This topic outlines a generic extension point for custom JavaScript for use with the Ephox Editors: Tiny MCE and Textbox.io within IBM Connections. It is designed for use by developers and integrators familiar with JavaScript development techniques.

Textbox extension point

Note: You should have expertise with JavaScript to use this extension point.

Note: Custom extensions for Ephox Editors for IBM Connections are not supported by IBM and is used at your own risk. When logging a PMR with IBM, you might be required to deactivate or remove any custom extensions and replicate the issue before IBM will accept the PMR.

Developers and integrators can customize and extend the functionality of the Ephox Editors: Tiny MCE and Textbox.io using Ephox Editors JavaScript API. The extension point provides an instance of the editor object that represents the Ephox Editors: Tiny MCE and Textbox.io instance that is to be created within IBM Connections. The developer can use this object to call any of the functions available on the editor object within the Ephox Editors: Tiny MCE and Textbox.io API.

Customization and Extension Point

The extension point enables the developer to provide a JavaScript function that is executed immediately after the editor instance has been created by the integration but before it has been loaded into the page. Developers can specify arbitrary JavaScript in this function to customize the Ephox Editors: Tiny MCE and Textbox.io. The editor object is passed in simply for convenience.

To make use of this extension point developers need to define their function in the postCreateTextboxio attribute of the integrationConfig object in the config/config.js file. When you open the config/config.js file you will see a blank template function available that you can populate with the code for your extension. The function receives the Ephox Editors: Tiny MCE and Textbox.io editor instance.

Best Practices for Extension Development Icon

Ephox recommends that when developing extensions, you make your modifications to a copy of the Ephox Editors for IBM Connections package. Once your customizations have been made, you can then rerun the deployment script provided with the integration to deploy your changes to the server, ensuring that you have a backup of code that's executing on the server. In some cases though, it can be useful to develop directly against the server, particularly when using a development or staging server. In this case you can follow the steps as described in Changing Customizations After Deployment.

The following extension example shows how to define a macro. This macro will convert any text between [red] and [/red] "tags" into red text.

postCreateTextboxio: function(editor) {

    editor.macros.addSimpleMacro('[red]', '[/red]', function(match) {

        return '<span style="color: red">' + match + '</span>';

    });

}