Topol Documentation

Appearance

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:

ts
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:

ts
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:

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

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.

ts
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:

ts
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;"
}