tinymce / tinymce-docs

TinyMCE Documentation
https://www.tiny.cloud/docs/
Other
86 stars 221 forks source link

Using the menu property to customise the menu bar items doesn't seem to work at all. #3210

Open Webreaper opened 5 months ago

Webreaper commented 5 months ago

I'm using TinyMCE, but it seems like the documentation here is wrong:

https://www.tiny.cloud/docs/tinymce/7/menus-configuration-options/#example-the-tinymce-default-menu-items

When I modify the visible/available menu items per the documentation, it has no effect on the menu bar. For example, here's a TinyMCE fiddle, that shows the problem:

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  menu: {
    edit: { title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall | searchreplace' },
    view: { title: 'View', items: 'code revisionhistory | visualaid visualchars visualblocks | spellchecker | preview fullscreen | showcomments' },
    insert: { title: 'Insert', items: 'image link media addcomment pageembed codesample inserttable | charmap emoticons hr | pagebreak nonbreaking anchor tableofcontents | insertdatetime' },
    format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript codeformat | styles blocks fontfamily fontsize align lineheight | forecolor backcolor | language | removeformat' },
    tools: { title: 'Tools', items: 'spellchecker spellcheckerlanguage | a11ycheck code wordcount' },
    table: { title: 'Table', items: 'inserttable | cell row column | advtablesort | tableprops deletetable' },
  }
});

TinyMCE Fiddle

If you run it, you'll see the File Menu still displays, and Search/replace is not available under the Edit menu.

Is the documentation wrong? I see the same behaviour whether I do it in plain Javascript, or if I do it in Blazor using a C# defined config option. Seems to happen with TinyMCE 6 or 7.

✔️ Expected result

In the above example, I expect to see:

❌ Actual result

❓ Possible solution

If you have ideas, you can list them here. Otherwise, you can delete this section.

📃 Other details

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

Webreaper commented 5 months ago

Incidentally, it seems like the same problem exists for the toolbar init property. Adding the following (based precisely on the example code given here doesn't work or have any effect either.

 toolbar: [
                { name: 'history', items: [ 'undo', 'redo' ] },
                { name: 'styles', items: [ 'styles' ] },
                { name: 'formatting', items: [ 'bold', 'italic' ] },
                { name: 'alignment', items: [ 'alignleft', 'aligncenter', 'alignright', 'alignjustify' ] },
                { name: 'indentation', items: [ 'outdent', 'indent' ] }
            ]
TheSpyder commented 5 months ago

This is a docs issue. The menu field does not control which menu items appear, only what each menu contains. To control which items appear use menubar.

Here's an updated fiddle: https://fiddle.tiny.cloud/3zjoHYUBdO/4

I included a modified toolbar which does work as documented. The labels are for accessibility, not visual. That perhaps could be better explained in the docs.