Using Custom Top Bar With Topol Plugin

When you add Topol Plugin into your platform, you might want to use your own custom top bar with branded buttons instead of the default one that comes with the editor. Removing the default top bar and using your own buttons means you can fully integrate Topol Plugin seamlessly into your app’s look and feel, while still accessing all editor features through JavaScript calls and callbacks.

How to Remove the Default Top Bar

You can hide the built-in top bar completely by adding this line to your TOPOL_OPTIONS:

removeTopBar: true,

How to Use Your Own Buttons with Topol Plugin

When you remove the default Top bar, you need to handle actions like Save, Undo, or Preview with your own buttons.

You can do this by calling methods directly on the TopolPlugin object from your custom buttons.

For example, to save manually, call:

window.TopolPlugin.save();

This triggers the save operation inside the editor and runs your onSave callback, giving you the current HTML and JSON data to handle (like saving to your server).

Setting up Callbacks to Handle Actions

In your Topol options, you define callbacks to react when these actions happen:

const TopolOptions = {
  id: "#app",
  authorize: {
    apiKey: "YOUR_API_KEY",
    userId: "YOUR_USER_ID",
  },
  removeTopBar: true,

  callbacks: {
    onSave(html, json) {
      // Save html and json to your database
    },

    onSaveAndClose(html, json) {
      // Save data and close or redirect from the editor
    },

    onUndoChange(count) {
      // React to undo action, count is number of undo steps
    },

    onRedoChange(count) {
      // React to redo action, count is number of redo steps
    },
  },
};

To better illustrate the whole process, let's look at the diagram bellow:

What Cctions Can You Trigger from Your Custom Top Bar?

• Save: window.TopolPlugin.save()

• Save and Close: window.TopolPlugin.saveAndClose()

• Undo: window.TopolPlugin.undo()

• Redo: window.TopolPlugin.redo()

• Toggle preview mode (desktop/mobile): window.TopolPlugin.togglePreview()

• Change preview size: window.TopolPlugin.togglePreviewSize()

This way, you get full control of the editor's functions but keep your own custom UI.

Combining with Mobile First

Topol Plugin also supports a mobile-first editing experience. You can combine this with your custom top bar and control mobile/desktop views programmatically. You can find more information about this feature here.