tinymce / tinymce-blazor

Blazor integration
MIT License
45 stars 13 forks source link

How to configure the menu items in Blazor? #81

Open Webreaper opened 4 months ago

Webreaper commented 4 months ago

I'm trying to customise the menu items in Blazor and have this:

<Editor ApiKey="@myKey" @bind-Value="@content" Conf="tinyConf"/>

@code { 
  protected override void OnInitialized()
  {
    var menu = new 
    {
      edit = new { title = "Edit", items = "undo redo | cut copy paste | selectall | searchreplace"},
      insert = new { title = "Insert", items = "image link media template codesample inserttable | charmap emoticons hr | pagebreak nonbreaking anchor toc | insertdatetime"},
      format = new { title = "Format", items = "bold italic underline strikethrough superscript subscript codeformat | formats blockformats fontformats fontsizes align lineheight | forecolor backcolor | removeformat"},
      view = new { title = "View", items = "code | visualaid visualchars visualblocks | spellchecker | preview fullscreen"},
      table = new { title = "Table", items = "inserttable | cell row column | tableprops deletetable" },
      tools = new { title = "Tools", items = "spellchecker spellcheckerlanguage | code wordcount"}
    };    

    tinyConf = new Dictionary<string, object>
    {
      { "width", "90%" },
      { "branding", false},
      { "statusbar", true },
      { "height", "400px"},
      { "max_height", 400},
      { "menu", menu }
    };

    base.OnInitialized();
  }

However, the custom menu isn't being initialised, and TinyMCE is just using the basic/standard menu. I get no errors. Any clue what I'm doing wrong?

Webreaper commented 4 months ago

Okay, so figured this out.

  1. Needed to include the plugins
  2. Seems that excluding a top-level menu from the menu object doesn't exclude it from the top-level menu. You have to use menubar combined with menu.

This code works in Blazor:

  <Editor ApiKey="blah" @bind-Value="@Content" 
          ScriptSrc="js/tinymce/tinymce.min.js" Conf="tinyConf"/>

@code {
 protected override void OnInitialized()
  {    
    var menu = new
    {
      edit = new { title = "Edit", items = "undo redo | cut copy paste | selectall | searchreplace"},
      insert = new { title = "Insert", items = "image link media template codesample inserttable | hr | pagebreak nonbreaking anchor toc | insertdatetime"},
      format = new { title = "Format", items = "bold italic underline strikethrough superscript subscript codeformat | formats blockformats fontformats fontsizes align lineheight | forecolor backcolor | removeformat"},
      view = new { title = "View", items = "code | visualaid visualchars visualblocks | spellchecker | preview fullscreen"},
      table = new { title = "Table", items = "inserttable | cell row column | tableprops deletetable" },
      tools = new { title = "Tools", items = "wordcount"}
    };
    var menubar = "edit insert format view table tools";

    tinyConf = new Dictionary<string, object>
    {
      { "width", "95%" },
      { "plugins", "anchor autolink autoresize emoticons fullscreen image lists advlist link quickbars media searchreplace table wordcount"},
      { "menubar", menubar},
      { "menu", menu },
    };

    base.OnInitialized();
  }
}
}
Webreaper commented 4 months ago

Leaving this open because it would be nice if the TinyMCE sample in the menu documentation highlighted this fact.