Skip to content

Set annotate editor defaults

If you want to set specific details for the annotate editor view, you can use the following.

// Configure annotate editor defaults (tool, color, font size, font family).
gform.addFilter('image_hopper_filepond_config', function(config, FilePond, $form, currentPage, formId, fieldId, entryId, files, inputField) {

// Set the default active tool on the annotate screen to "text". Available options include: eraser, sharpie, line, arrow, text, rectangle, ellipse
config.imageEditor.editorOptions.annotateActiveTool = 'text'

// Change the text tool defaults
config.imageEditor.editorOptions.markupEditorToolStyles.text[0].color = [0,0,0] // This array is RGB color value that has each integer divided by 256 so that each number is between 0 and 1. i.e grey = [128/256, 128/256, 128/256]

config.imageEditor.editorOptions.markupEditorToolStyles.text[0].fontSize = '15%' // Extra small = 2%, Small = 4%, Medium Small = 8%, Medium = 10%, Medium Large = 15%, Large = 20%, Extra Large = 25%

// Use your own custom font list. Note: you must load the font in the browser (like you would any other web font) or the user must have it installed locally for the font to be displayed correctly
config.imageEditor.editorOptions.markupEditorShapeStyleControls.fontFamily[1].options = [
  [undefined, 'Default'],
  ['arial', 'Arial'],
  ['avenir', 'Avenir'],
  ['courier', 'Courier'],
]

  return config
}, 20 )