Add Custom Icons and Commands on the Editor Toolbar
The Editor toolbar at the top of the Window allows embedding of common Markdown markup on the selected text. The toolbar is kept relatively simple and so it doesn't wrap all operations that are supported.
It's possible to extend the toolbar with custom operations:
- Adding additional built-in commands
- Adding custom HTML markup commands
You can do this by using the Configuration.Editor.AdditionalToolbarIcons
which is a collection of an icon name plus a an action name. For example:
"Editor": {
"AdditionalToolbarIcons": {
// internal MM Editor Commands
"Pencil": "mark",
"ArrowDown": "small",
// html tag wrapping
"Coffee": "html|cite",
// template for text selection
"Bolt": "html|<b><i>{0}</i></b>"
},
The item in each map is a FontAwesome Icon to be used as an icon, the second is the name of an existing command. The last (Coffee) example, uses html|cite
as the value which results in custom tag created around the text as <cite>text</cite>
.
Built-in Commands
Built in commands handle the visible toolbar operations, plus a few additional ones that are not actually shown on the toolbar. The following 3 commands are not already on the toolbar:
small
- adds text in<small>txt</small>
mark
- adds textin<mark>txt</mark>
numberedlist
- formats lines of text as a numbered listpagebreak
- inserts an HTML pagebreak into the document
All available commands can be found in the source code in:
MarkdownDocumentEditor::MarkupMarkdown()
You can also create custom addins that extend the default markup 'commands' by implmenting MarkdownMonsterAddin.OnEditorCommand and creating your own commands.
Custom HTML Tag Wrapping
You can also create a custom HTML commands that wrap the selected text into an HTML element tag. For example:
"AdditionalToolbarIcons": {
"Pencil": "html|cite"
}
<cite>selected text</cite>
This gives you access to formatting just about any HTML markup.
Template Content
Additionally you can also create custom HTML output using a simple 'wrapping' template where you use {0}
to signify the selection. For example:
"AdditionalToolbarIcons": {
"Bolt": "html|<b><i>{0}</i></b>"
}
Which renders:
<b><i>selected Text</i></b>
Custom Operations
If you need to add toolbar buttons with more control you can also use either the Commander Addin or a full Addin.
// Font Awesome Icon
public void AddEditToolbarIcon(string iconName, string markdownActionCommand,
ToolBar toolbar = null, ICommand command = null )
// Image Source Icon (sized to 16 high)
public void AddEditToolbarIcon(ImageSource icon, string markdownActionCommand,
ToolBar toolbar = null, ICommand command = null)
For example using the Commander Addin you could use the following:
Model.Window.AddEditToolbarIcon("Microphone", "html|speak");
which can be triggered off a hotkey (or by running the script).
Using a full addin gives you the added capability of loading icon on application startup without requiring an explicit hotkey.
Note: You can also pass completely custom commands to the
AddEditToolbarIcon()
method using an addin so you can completely take over custom button processing.
© West Wind Technologies, 2016-2023 • Updated: 01/18/20
Comment or report problem with topic