Text Editor Configuration

Topol uses the TinyMCE rich-text editor to power text editing blocks within the Plugin. You can customize TinyMCE's behavior by passing a custom tinyConfig object as part of your PLUGIN_OPTIONS customization object. This configuration is merged with our internal default settings, so you only need to define what you want to change or extend.

INFO

You can check TinyMCE documentation here.

You can override or extend the default TinyMCE configuration by passing your custom settings under the tinyConfig key:

tinyConfig: {
  your_configuration: [
    "value",
  ];
}

Custom Configuration Examples

Full list of options for customizing the editor’s toolbar is available on the TinyMCE documentation page here.

Toolbar Customization

The toolbar property lets you control which buttons/tools are available in the text editor's toolbar. To simplify the toolbar or add new options, modify the toolbar value.

Topol default toolbar configuration:

tinyConfig: {
  toolbar: [
    "blocks fontfamily fontsizeinput bold italic underline strikethrough removeformat nonbreaking | alignleft aligncenter alignright alignjustify link numlist bullist forecolor backcolor mergefields emoticons code more",
  ];
}

Customized toolbar:

tinyConfig: {
  toolbar: [
    "undo redo | bold italic underline strikethrough alignleft aligncenter alignright | bullist numlist outdent indent link image code | forecolor backcolor",
  ];
}

Link List Customization

The link_list property lets you define a list of preconfigured links that users can select when adding a hyperlink. This will show a dropdown list in the "Insert/Edit Link" dialog.

tinyConfig: {
  link_list: [
    { title: "View in Browser", value: "https://example.com/view-in-browser" },
    { title: "Unsubscribe", value: "https://example.com/unsubscribe?user={{userId}}" },
    { title: "Privacy Policy", value: "https://example.com/privacy" },
    { title: "Contact Support", value: "https://example.com/contact" },
  ];
}

Font Customization

WARNING

When working with fonts, always ensure you set suitable web-safe fonts and operating system fonts as fallback options. Custom fonts are significantly limited across various email clients.

You can control which fonts are available in the font family selector with the font_family_formats option. You can also define fontsize_formats:

tinyConfig: {
  fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt",
  font_family_formats:
    "Arial=arial,helvetica,sans-serif; " +
    "Georgia=georgia,palatino; " +
    "Impact=impact,chicago; " +
    "Courier New=courier new,courier,monospace;"
}

Hiding Tools in a “More” Menu

As you add tools to the Toolbar, it can get crowded and harder to use. To keep things tidy, you can move rarely used tools into a custom More menu (⋮).

1) Define the “More” menu

Add a toolbar_groups entry and set toolbar_mode inside your existing tinyConfig option. The example below creates a moretools group and places selected tools inside it.

tinyConfig: {
  toolbar_groups: {
    moretools: {
      icon: "more-drawer",
      tooltip: "More tools", // shown on hover; change to any label you like
      // tools that will live inside the More menu:
      items: "forecolor backcolor mergefields emoticons code",
    },
  },
  toolbar_mode: "floating",
}

2) Update the toolbar layout

Remove tools you just moved (to avoid duplicates) and replace the default more menu with your custom moretools button at the end. If you're not using the more menu, simply add moretools at the end.

tinyConfig: {
  // ... (same as above)
  toolbar: [
    // remove tools already moved to `moretools`
    // and put `moretools` at the end
    "blocks fontfamily fontsizeinput bold italic underline strikethrough removeformat nonbreaking | alignleft aligncenter alignright alignjustify link numlist bullist moretools",
  ],
}

You can rename the button via tooltip, and change its icon via icon. Keep moretools at the end of the toolbar string so it behaves like a drawer for overflow/rare actions. If any item appears both in toolbar and moretools, it will show twice, so remove duplicates from toolbar.

In our example, the resulting tinyConfig option should be as follows:

tinyConfig: {
    toolbar_groups: {
      moretools: {
        icon: "more-drawer",
        tooltip: "More tools", 
        items: "forecolor backcolor mergefields emoticons code",
      },
    },
    toolbar_mode: "floating",
    toolbar: [
      "blocks fontfamily fontsizeinput bold italic underline strikethrough removeformat nonbreaking | alignleft aligncenter alignright alignjustify link numlist bullist moretools",
    ],
  },