This page is part of a static HTML representation of the TiddlyWiki at https://tiddlywiki.com/

How to create dynamic editor toolbar buttons

18th October 2021 at 10:23am

Create a New Toolbar Button

The easiest way to create new editor toolbar button is to clone and open one.

This tiddler contains all the necessary elements that are important for toolbar buttons.

text
We don't discuss the text field details in this howto
caption
The caption field is used to display the shortcut name in the $:/ControlPanel : Keyboard Shortcuts tab
condition
A filter, that defines the button visibility state
condition-disabled Introduced in v5.1.23
A filter, that allows us to define the "disabled" attribute for buttons. eg: [[$:/temp/bold/disabled]get[state-disabled]else[no]]
This condition must return "no", if the "state tiddler" or "state field" doesn't exist! So there has to be a else[no] element in the filter.
description
Is used as the button tooltip
icon
Assigns the button icon. We use $:/core/images/spiral here. More button icons can be found in the Icon Gallery
shortcuts
This is the Keyboard Shortcut Descriptor eg: ((temp-bold))

Disabled State

You can use any "state tiddler" to define the button disabled state. It's important, that the condition-disabled field is a filter. For our example we use the state-disabled field from tiddler: $:/temp/bold/disabled

The easiest way to test filters is with the $:/AdvancedSearch : Filter tab

The temporary "bold button" is disabled: "no" ... You can see the button in the editor toolbar if you edit any tiddler!

Create Keyboard Shortcuts for New Button

For our HowTo we use the Keyboard Shortcut Descriptor: ((temp-bold))

To create a valid shortcut configuration we need 2 tiddlers:

$:/config/ShortcutInfo/temp-bold .. and
$:/config/shortcuts/temp-bold

Clean up the Configuration Tiddlers

If you don't need the config tiddlers anymore you can