Custom Button with C# Function Call

[curea]

I am trying to replicate the following code in TinyMCE.Blazor:

editor.addButton('mybutton', { text: "My Button", onclick: function () { alert("My Button clicked!"); } });

Is there a simple way to add a custom button and call a function?

[exalate-issue-sync[bot]]

Ref: INT-2731

[jscasca]

@curea currently the only way to add buttons is by creating a js configuration object and adding those buttons in the setup function. To call a Blazor function you will need to call the DotNet.invokeMethodAsync("<your_blazor_fn>", args..);

[curea]

Is there an example of creating one in a js configuration object somewhere? I've really been struggling with this, so any help would be really appreciated.

[jscasca]

@curea I made a quick sample you can find in https://github.com/jscasca/SampleTinyMceBlazor

You can create a config in your js files and load that configuration as long as it is part of the window object. For example in the index.html:

 <script>
        const invokeCustomFn = (val) => {
            DotNet.invokeMethodAsync("SampleTinyMceBlazor", "CustomFn", val);
        };
        window.my = {
            tinyConf: {
                setup: (e) => {
                    e.ui.registry.addButton('customBn', {
                        onAction: () => {
                            invokeCustomFn(e.getContent());
                        },
                        text: 'sample'
                    });
                }
            }
        }
    </script>

You can specify the js config by using the JsConfSrc. For example:

<Editor id="Sample1" JsConfSrc="my.tinyConf" Conf="@basicConf"></Editor>

@code {

  private Dictionary<string, object> basicConf = new Dictionary<string, object>();

  protected override Task OnInitializedAsync()
  {
    basicConf.Add("height", 300);
    basicConf.Add("menubar", false);
    basicConf.Add("toolbar", "undo redo | bold italic | customBn");
    return base.OnInitializedAsync();
  }

  [JSInvokable("CustomFn")]
  public static void DebugString(string val)
  {
    Console.WriteLine($"debugging val [{val}]");
  }
}

[curea]

Thank you, this is very helpful and works great!