Implementing Editor

The simplest way to incorporate Editor is to copy from the sample file, and it can be accomplished in a few steps.


For reference, we will use this as a checklist:  https://www.geistinteractive.com/checklist-moving-filemaker-code/

Implementation Steps 

File Placement

Start by placing the Editor.fmp12 file next to where your file is being stored: on the server or inside a folder. This ensures that copy/pasting scripts into your app will create the valid path to this file.

Custom functions

Copy/paste the custom functions from the example into your own.

  1. FileMaker Pro Advanced is required for this step.If you do not have FMPA, please send the file to help@geistinteractive.com and we can set the custom functions for you.

Fields

Create a text field in the table that will hold the formatted text.

There is also a field called "CSS" in the example. The data in this field is needed for showing the properly-formatted text in the view-only web viewer.

Scripts

Copy/Paste the scripts. If the Quill file is next to your custom app file, the scripts will auto-create the External File Reference and all external scripts will not be broken.

Required scripts

There are fours scripts that are required:

  1. Open Editor Window - opens the editor, loads the formatted text.
  2. Set ToolBar Options - a place to update the options you'd like to make available in the editor.
  3. Set Format Options - a script to update the options for formats that can be pasted into the editor.
  4. Handle Save - this will trigger when the window is closed. It will save the formatted text back to the record.

Script Reference Issues

Fix any script reference issues. Use FileMaker's "Check for Errors" tool in the script workspace. You'll find some errors as table and field names are different. There should only be a handful of changes, and these are clearly highlighted in red.

Layout Revisions

The example file has a web viewer on it for viewing of the formatted text. It is named "EditorSize". The dimensions of this object are picked up by the editor card window.

Specific Customization

Refer to the two guides for further details about further customization

Still need help? Contact Us Contact Us