Extending the Tiny Editors with Custom JavaScript

This topic outlines a generic extension point for custom JavaScript for use with the Tiny Editors: Tiny MCE and Textbox.io within HCL 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 Tiny Editors for HCL Connections are not supported by IBM and is used at your own risk. When logging an issue with HCL, you might be required to deactivate or remove any custom extensions and replicate the issue before HCL will accept the issue.

Developers and integrators can customize and extend the functionality of the Tiny Editors: Tiny MCE and Textbox.io using Tiny Editors JavaScript API. The extension point provides an instance of the editor object that represents the Tiny Editors: Tiny MCE and Textbox.io instance that is to be created within HCL Connections. The developer can use this object to call any of the functions available on the editor object within the Tiny 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 Tiny 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 Tiny Editors: Tiny MCE and Textbox.io editor instance.

Best Practices for Extension Development Icon

Tiny recommends that when developing extensions, you make your modifications to a copy of the Tiny Editors for HCL 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>';

    });

}