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[bot]]

Internal Ref: INT-3241