Customizing Editor

Editor can be customized in many ways. Since it is native FileMaker, a developer can do with it what she wishes by customizing FileMaker scripts that interact with the Quill.js library. Below is a list of possible customizations.

Here is the reference guide for Quill.js

The following options can be adjusted in the "Open Editor Window" script:

Change the Theme

There are two themes: bubble and snow. Their different in how the toolbar is displayed.

Here's the bubble theme:

Here is the Snow theme

This can be updated in the Set Toolbar Options script.

If no theme is set in this script, Editor will default to the Snow theme.

Default Text

When a blank editor is opened (no formatted text stored in the record), default text will show up. You can customize it in the Open Editor Window script step.

When no default text is provided, the editor will use "Begin Typing" as its default text.

Add/Remove Toolbar Options

You have many options when setting up the toolbar (for both themes). The sample file provides many of them, but you can explore the documentation for more ideas.

The Set Toolbar Options script is the place to determine which options will be included, the order in which they will be included, and the grouping. The final object passed to Editor looks like this:

[
	[
		{
			"header" : [ 1, 2, 3, false ]
		}
	],
	[
		{
			"header" : 1
		},
		{
			"header" : 2
		}
	],
	[ "bold", "italic", "underline", "strike" ],
	[
		{
			"list" : "ordered"
		},
		{
			"list" : "bullet"
		},
		{
			"indent" : "-1"
		},
		{
			"indent" : "+1"
		}
	],
	[ "link", "image" ],
	[
		{
			"color" : []
		},
		{
			"background" : [ "red" ]
		}
	],
	[
		{
			"font" : []
		}
	],
	[
		{
			"align" : []
		}
	]
]
	

A couple of notes:

  • Since this object is an array, the order of the formatting options matter. You can change the order in the array and the order of the buttons will reflect the change.
  • Any set of options (such as "bold", "italic", "underline", "strike") stored in a nested array will cause the buttons to be grouped together.
  • You can add custom buttons that perform an action. In the example above, this array: [ { "header" : 1 }, { "header" : 2 } ] represents two custom buttons. See the documentation for more.
  • The Quill library contains defaults. If I want the default colors, I can pass a blank array as the value to the key "color" (as shown above). If I want to overwrite the defaults, you can pass your own array of color (name or hex value) or font or align elements. See the documentation for the complete list of details.
  • The Set Toolbar Options script contains one variable per array element. The end of the script, the variable $order, determines the order and which options will be added. You can remove or reorder the options.

Add/Remove Formatting Options

Fomratting options in Editor refers the which formats you would allow to paste in. Here are the defaults:

 <div>
  [ 
 </div>
 <div>
  "header",
 </div>
 <div>
  "bold", 
 </div>
 <div>
  "italic", 
 </div>
 <div>
  "underline", 
 </div>
 <div>
  "strike", 
 </div>
 <div>
  "blockquote",
 </div>
 <div>
  "list", 
 </div>
 <div>
  "bullet", 
 </div>
 <div>
  "indent", 
 </div>
 <div>
  "link", 
 </div>
 <div>
  "image", 
 </div>
 <div>
  "color", 
 </div>
 <div>
  "font", 
 </div>
 <div>
  "align"
 </div>
 <div>
  ] 
 </div>

As with the toolbar options, you can add or remove from this list. 

The Script "Set Formatting options" will allow you to customize the allowed options.

Inserting Pre-Made Text

You can insert pre-made text into editor using a FileMaker Script. In the example, the text is hardcoded in the "InsertText" script, but you can easily change this to anything you wish. 

For example, you could create a table of common words/phrases and use this script to populate any one of them into Editor at the click of a button. 

The text should appear at the cursor location.

Inserting Images

You can insert images into editor using a FileMaker Script. In the example, a table of images is included. Clicking on an image will insert the image (base64 encoded) into the editor at the cursor position.

Still need help? Contact Us Contact Us