Integrating Quill with FileMaker 19

There are a variety of reasons to add a WYSWIG editor like Quill to your FileMaker database. Whether you’re trying to implement HTML emails or just Rich Text input through WebDirect, Quill can be a nice substitute for a FileMaker text field. Now, with FileMaker 19, an embedded WebViewer with Quill is easier than ever to implement and it works in WebDirect.

The purpose of this demo file (download at bottom of post) is to show, as simply as possible, how to integrate a Javascript library to FileMaker:

Show an embedded WebViewer talking directly to a FileMaker script
Conversely, show a FileMaker script updating a WebViewer object
Pass MULTIPLE parameters from JavaScript to FileMaker using JSON
WebDirect compatibility!
Use JSON.Stringify() to escape the html text before sending the JSON parameters to your script.

Saving WebViewer contents to a FileMaker field

/* On text-change call FileMaker Script */
quill.on('text-change', function() {
    var textPlain = quill.getText();
    var textHTML = JSON.stringify(quill.root.innerHTML);
    var textJSON ='{\"plain\":\"'+ textPlain +'\", \"html\":'+ textHTML +'}';
    FileMaker.PerformScript(\"SaveText\", textJSON); 
  })

In this section of the WebViewer code we are grabbing data from the Quill object and sending it to the FileMaker script. The trick here is how to send multiple parameters to FileMaker. JSON seemed like a good choice. However, HTML can have quotes and other characters that will invalidate the JSON. To deal with this, use JSON.Stringify to escape the quotes in the html.

Get FileMaker field data into the the WebViewer

/* Set initial text. Script trigger call upon record load */
function setFMHTML(html){
    quill.root.innerHTML = html;
}

In the WebViewer code, declare a function to set the Quill’s HTML. Using script triggers, set the layout OnRecordLoad to call the FileMaker script LoadText. The LoadText script uses the new Perform Javascript in WebViewer step to call the setFMHTML() JS function.

WebDirect Compatibility and Issues

This demo will work in WebDirect but i did notice a few issues with setting the WebViewer text upon record load. I had to add a pause/resume script step otherwise there was a timing issue with the WebViewer loading properly. I added a button to manually load it for WebDirect users.

Quill Demo was updated 08/14/2021 to handle quotes.
Quill Demo was updated 09/29/2021 to handle backslashes.

Download Quill_Demo.fmp12