Class AbstractToolbarAbstract

Adds an action button with title to this toolbar (or to the given parent element).

options can either be an object with properties mustBeToplevel and/or autoDisableInReadOnlyEditors or a boolean value. If a boolean, it is interpreted as being the value of mustBeToplevel.

Adds widgets that don't correspond to tools, but do allow the user to control the editor in some way.

By default, this includes DocumentPropertiesWidget and InsertImageWidget.

Adds toolbar widgets based on the enabled tools, and additional tool-like buttons (e.g. DocumentPropertiesWidget and InsertImageWidget).

Adds both the default tool widgets and action buttons.

Adds an "Exit" button that, when clicked, calls exitCallback.

Note: This is roughly equivalent to

toolbar.addTaggedActionButton([ ToolbarWidgetTag.Exit ], {
  label: this.editor.localization.exit,
  icon: this.editor.icons.makeCloseIcon(),

  // labelOverride can be used to override label or icon.
  ...labelOverride,
}, () => {
  exitCallback();
});
Copy

with some additional configuration.

Final

Adds a save button that, when clicked, calls saveCallback.

Example

import { Editor, makeDropdownToolbar } from 'js-draw';

const editor = new Editor(document.body);
const toolbar = makeDropdownToolbar(editor);

toolbar.addDefaults();
toolbar.addSaveButton(() => alert('save clicked!'));

labelOverride can optionally be used to change the label or icon of the button.

Adds a spacer.

Toolbars can choose to ignore calls to addSpacer.

Example

Adding a save button that moves to the very right edge of the toolbar while keeping the other buttons centered:

const toolbar = editor.addToolbar(false);

toolbar.addSpacer({ grow: 1 });
toolbar.addDefaults();
toolbar.addSpacer({ grow: 1 });

toolbar.addActionButton({
    label: 'Save',
    icon: editor.icons.makeSaveIcon(),
}, () => {
      saveCallback();
});
Copy

Like addActionButton, except associates tags with the button that allow different toolbar styles to give the button tag-dependent styles.

Adds undo and redo buttons that trigger the editor's built-in undo and redo functionality.

Adds an ActionButtonWidget or BaseToolWidget. The widget should not have already have a parent (i.e. its addTo method should not have been called).

Example

const toolbar = editor.addToolbar();
const insertImageWidget = new InsertImageWidget(editor);
toolbar.addWidget(insertImageWidget);
Copy

Adds widgets for pen/eraser/selection/text/pan-zoom primary tools.

If filter returns false for a tool, no widget is added for that tool. See addDefaultToolWidgets

Deserialize toolbar widgets from the given state. Assumes that toolbar widgets are in the same order as when state was serialized.

Remove this toolbar from its container and clean up listeners. This should only be called once for a given toolbar.

Removes the given widget from this toolbar.

Returns a snapshot of the state of widgets in the toolbar.