Blog

All Blog Posts  |  Next Post  |  Previous Post

TMS WEB Core: Integrating the Froala Editor

Thursday, July 4, 2019

How to integrate a JavaScript component into TMS WEB Core

As a proof of concept, this article describes how easy it is to achieve a basic integration of the Froala Editor into TMS WEB Core.

Froala Editor is a lightweight WYSIWYG HTML Editor written in Javascript that enables rich text editing capabilities for your applications.


Getting started

Add a link to the Froala CSS and the JavaScript library.

  • Download Froala Editor
  • Add the required CSS and JS files to the project folder
  • Embed a link in the project's HTML file
<link href="css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/froala_editor.pkgd.min.js"></script>

Setup the Froala Editor

Now that the JS file is added, we have access to the Froala Editor library

  • Declare an external function so we can use Object Pascal to create the Editor Object
  • Create an object that links the Froala Editor events with the WEB Core event handlers
  • Initialize the Froala Editor
var
  FEvents: TJSObject;
  FFroalaEditor: TJSObject;
  function froalaEditor(s: string; jsObject: TJSObject): TJSObject; overload; external name 'new FroalaEditor';

begin
    FEvents := new([
     'contentChanged', @HandleChanged,
     'initialized', @HandleLoaded,
     'focus', @HandleStartEdit,
     'blur', @HandleEndEdit
     ]);

    FFroalaEditor := froalaEditor('div#' + ElementID,	new([
      'toolbarInline', false,
      'events', FEvents
      ]));
end;

Two modes

There are two ways to use the Froala Editor:

Classic
Display the Froala WYSIWYG HTML Editor in your TMS WEB Core project.
This is the default behaviour.



Inline
Connect any TWebLabel to the TWebFroalaEditor component to instantly make it editable in the browser.

  WebLabel1.EventStopPropagation := [];
  WebFroalaEditor1.Visible := False;
  WebFroalaEditor1.InlineEditing := True;
  WebFroalaEditor1.Editor := WebLabel1;



Live demo and source code


View the live demo

Download the full source code

Note: TMS WEB Core v1.2.3.0 or newer is required.

Install Notes:
The ZIP file contains two folders:
  • The "Component Library Source" folder: Build and install the package file "TMSWEBFroalaEditor"
  • The "Core Source" folder:
    • Option 1: Copy the PAS file to the "Core Source" subfolder of the TMS WEB Core install folder
    • Option 2: Add the path of the folder to the TMS WEB library path. (in the Delphi IDE: Tools>Options>TMS WEB>Library Path)


Bart Holvoet




This blog post has not received any comments yet.



Add a new comment

You will receive a confirmation mail with a link to validate your comment, please use a valid email address.
All fields are required.



All Blog Posts  |  Next Post  |  Previous Post