Text Editor Configuration

Topol Plugin supports two text editors for editing text blocks within your email templates:

• TinyMCE (default) — a fully featured rich-text editor with extensive toolbar customization, font controls, and link lists.
• Tiptap (beta) — a lightweight alternative with a streamlined editing experience.

You can select which editor to use by setting the textEditor option in your TOPOL_OPTIONS configuration object:

textEditor: "tinymce", // default
// or
textEditor: "tiptap",

Both editors support positioning the toolbar at the bottom of the editor window. See Positioning the Toolbar at the Bottom for details.

TinyMCE Configuration

TinyMCE is the default text editor. You can customize its behavior by passing a custom tinyConfig object as part of your TOPOL_OPTIONS configuration 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",
  ];
}

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",
    ],
  },

Positioning the Toolbar at the Bottom of the Editor Window

You can also lock the toolbar to the bottom of the editor window. This setting helps prevent the toolbar from overlapping and hiding parts of the template above the edited text block. By placing it at the bottom, you ensure that all surrounding content stays visible while editing.

To lock the toolbar to the bottom of the editor window, add this option to your TOPOL_OPTIONS configuration object:

// you have to specify the toolbar's alignment
textEditorToolbarBottomPosition: "left" | "center" | "right",

Tiptap Editor Configuration

INFO

The Tiptap editor is currently in beta. If you encounter any issues or have a feature request, please contact us.

To use the Tiptap editor, set the textEditor option to "tiptap" in your TOPOL_OPTIONS configuration object:

textEditor: "tiptap",

Tiptap Configuration Options

You can customize the Tiptap editor by passing a tiptapConfig object in your TOPOL_OPTIONS:

tiptapConfig: {
  //...
},

Theme Customization

You can control the toolbar theme with the light option. When true, the toolbar adapts its appearance to match the editor's light/dark mode. Set to false to invert this behavior.

tiptapConfig: {
  light: true, // default
}