Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to configure the menu items in Blazor? #81

Open
Webreaper opened this issue Apr 8, 2024 · 2 comments
Open

How to configure the menu items in Blazor? #81

Webreaper opened this issue Apr 8, 2024 · 2 comments

Comments

@Webreaper
Copy link

Webreaper commented Apr 8, 2024

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
Copy link
Author

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 Webreaper reopened this Apr 9, 2024
@Webreaper
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant