How to customize the toolbar custom button

[Seanxwy]

I want to add a custom button to the toolbar, how should I do it in blazor mode? I want the toolbar buttons to interact directly with the blazor component

[trall0]

I did the following:

In the razor page ...

<TinyMCE.Blazor.Editor JsConfSrc="myConfig " ... />
<script>
   window.myConfig =
		{
			menu:
				{
				insert: { title: 'Insert', items: 'my-menu link separator emoticons' }
				},
                       menubar: 'edit insert view format table tools',
                       plugins: 'lists table searchreplace link emoticons code',
                       toolbar: 'undo redo | bold italic underline | alignleft aligncenter alignright alignjustify | fontfamily fontsize | outdent indent | numlist bullist| my-toolbar link emoticons | searchreplace',
			setup: (editor) => 
{
	// define icon
	editor.ui.registry.addIcon('my-icon', '<svg width="24pt" height="24pt" viewBox="0 0 32 32" preserveAspectRatio="xMidYMid meet">' + ... + '</svg>');
	// define toolbar button
	editor.ui.registry.addButton('my-toolbar',
		{
			icon: 'my-icon',
			tooltip: 'Hello World',
			onAction: (_) => alert('hi!')
		});
	// define menu option
	editor.ui.registry.addMenuItem('my-menu',
		{
			text: 'Hello World',
			icon: 'my-icon',
			onAction: () => alert('hi!')
		});
}
		};
</script>

Take a look to https://www.nuget.org/packages/InputTinyMCEEditor.Blazor/ also.

[exalate-issue-sync]

Internal Ref: INT-3241