Integrating TinyMCE Editor

Owned by David Russo
Last updated: Aug 16, 2023 by Jessica Tomkins
2 min read



TinyMCE is a popular open source text editor for web browsers, useful for comments, notes, or any other free-form text entry: 

Like many JavaScript-based components, TinyMCE can be integrated into Profound UI screens. The example below shows how to create a TinyMCE editor over a Profound UI text area widget which can be processed using standard RPG field binding. More information can be found on the TinyMCE website: 

http://www.tinymce.com

To use the example: 

  • Download a copy of TinyMCE ZIP archive from the download site here. Extract the 'tinymce' directory and place in HTTP server document root directory (default /www/profoundui/htdocs) on the IFS. This example was tested with TinyMCE version 4.1.7.

  • Download the example save file here. Transfer to your system and restore the TINYMCE library. This contains the Rich Display File and RPG source code.

  • Download the example script here. Place this in your HTTP server DOCUMENT_ROOT/profoundui/userdata/custom directory, or any sub-directory. This file contains calls that are used in the Rich Display File source member TINYMCED. See the "onload" and "onsubmit" events:

  • The 'createEditor()' function call accepts the id of the text area widget. 

  • Call the CL program TINYMCE/TINYMCEC to start the example. This can be called from an anonymous or authenticated Rich Display File application session, or from Genie. 

  • The example program saves the editor output into a database file TINYMCE/TINYMCEP. The text is stored in Unicode (UTF-16), to support all possible characters.

  • The same "onload" and "onsubmit" calls can be used to integrate a TinyMCE editor into any Rich Display File screen.