Add custom macros
Creating simple macros to provide useful work shortcuts.
Procedure
-
Using a plain text editor, open config/config.js in the extracted Tiny Editors for HCL Connections package.
Note: Use a plain text editor to avoid inserting invalid formatting or symbols into config.js. Do not use a rich text editor such as Microsoft Word for editing configuration files.
-
Locate the
postCreateTextboxiofunction template.Figure 1. The default postCreateTextboxiofunction templatepostCreateTextboxio: function(editor) { }This function is called for both Textbox.io and TinyMCE, and only accepts one parametereditor. -
Use the runtime API
editor.macros.addSimpleMacroto add a macro.Note: The usage is as follows:editor.macros.addSimpleMacro(startString, endString, callback);where
- startString
- is a string to search for signifying the beginning of the macro replacement.
- endString
- is a string to search for signifying the end of the macro replacement.
- callback
- is a function that receives the text between the
startStringandendStringmarkers and returns HTML which should replace it (includingstartStringandendString).
Macros could be used to implement a simplified bbcode like system.Figure 2. Example 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>'; }); }Multiple macros can be created.Figure 3. Example Red and Blue macros postCreateTextboxio: function(editor) { editor.macros.addSimpleMacro('[red]', '[/red]', function(match) { return '<span style="color: red">' + match + '</span>'; }); editor.macros.addSimpleMacro('[blue]', '[/blue]', function(match) { return '<span style="color: blue">' + match + '</span>'; }); } - Continue configuring the Tiny Editors integration or continue with the installation.