Skip to content

Commit 4678002

Browse files
kemister85kemister85
authored
DOC-3326: Document table picker fancymenuitem (#3999)
Add documentation for using fancymenuitem with fancytype 'inserttable' to display the built-in table grid picker in a custom menu button. Includes live demo and code example.
1 parent 870a12b commit 4678002

3 files changed

Lines changed: 99 additions & 3 deletions

File tree

‎modules/ROOT/examples/live-demos/custom-table-picker-menu-button/index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<textarea id="custom-table-picker-menu-button">
2+
{{logofordemoshtml}}
3+
<h1 style="text-align: center; font-size: 1.75rem;">Tables for the workflow</h1>
4+
<p style="text-align: center; color: #64748b;">Click the table button above. Hover the grid, pick the size, click to insert. No dialogs.</p>
5+
6+
<table style="border-collapse: collapse; width: 100%; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08);" border="0">
7+
<thead>
8+
<tr style="background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); color: white;">
9+
<th scope="col" style="padding: 12px 16px; text-align: left; font-weight: 600;">Contact</th>
10+
<th scope="col" style="padding: 12px 16px; text-align: left; font-weight: 600;">Company</th>
11+
<th scope="col" style="padding: 12px 16px; text-align: left; font-weight: 600;">Status</th>
12+
</tr>
13+
</thead>
14+
<tbody>
15+
<tr style="background: #f8fafc; border-bottom: 1px solid #e2e8f0;"><td style="padding: 12px 16px;"><strong>Sarah Chen</strong></td><td style="padding: 12px 16px;">Acme Corp</td><td style="padding: 12px 16px;">Active</td></tr>
16+
<tr style="background: white; border-bottom: 1px solid #e2e8f0;"><td style="padding: 12px 16px;"><strong>Marcus Webb</strong></td><td style="padding: 12px 16px;">TechStart</td><td style="padding: 12px 16px;">Follow-up</td></tr>
17+
<tr style="background: #f8fafc;"><td style="padding: 12px 16px;"><strong>Elena Rodriguez</strong></td><td style="padding: 12px 16px;">Global Inc</td><td style="padding: 12px 16px;">New</td></tr>
18+
</tbody>
19+
</table>
20+
21+
<p style="text-align: center; margin-top: 1.5rem;">Add a table anywhere.</p>
22+
</textarea>

‎modules/ROOT/examples/live-demos/custom-table-picker-menu-button/index.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
tinymce.init({
2+
selector: 'textarea#custom-table-picker-menu-button',
3+
height: 600,
4+
plugins: 'table',
5+
toolbar: 'inserttable',
6+
menubar: false,
7+
8+
setup: (editor) => {
9+
editor.ui.registry.addMenuButton('inserttable', {
10+
icon: 'table',
11+
tooltip: 'Insert table',
12+
fetch: (callback) => {
13+
callback([
14+
{
15+
type: 'fancymenuitem',
16+
fancytype: 'inserttable',
17+
onAction: (data) => {
18+
editor.execCommand('mceInsertTable', false, {
19+
rows: data.numRows,
20+
columns: data.numColumns,
21+
options: { headerRows: 1 }
22+
});
23+
}
24+
}
25+
]);
26+
}
27+
});
28+
}
29+
});

‎modules/ROOT/pages/custom-menu-toolbar-button.adoc‎

Lines changed: 48 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
= Creating custom Menu toolbar buttons
22
:navtitle: Menu toolbar button
33
:description: Creating custom Menu toolbar buttons for TinyMCE
4-
:keywords: toolbar, toolbarbuttons, buttons, toolbarbuttonsapi
4+
:keywords: toolbar, toolbarbuttons, buttons, toolbarbuttonsapi, fancymenuitem, inserttable, table picker
55

66
A toolbar menu button is a toolbar button that opens a menu when clicked. This menu can also contain submenus. This is useful for grouping together actions that would otherwise be several buttons on the toolbar. It can also be used to reduce visual clutter and save UI space, as menubar menu items and some toolbar buttons could be moved into a toolbar menu button. Potentially, all menubar menu items could be moved into toolbar menu buttons, allowing for the editor to be used without a menubar at all.
77

@@ -39,7 +39,7 @@ include::partial$misc/admon-predefined-icons-only.adoc[]
3939

4040
The following is a simple toolbar menu button example:
4141

42-
liveDemo::custom-toolbar-menu-button[tab="js"]
42+
liveDemo::custom-toolbar-menu-button[]
4343

4444
This example configures a toolbar menu button with the label `+My Button+` that opens the specified menu when clicked. The top-level menu contains two items. The first menu item inserts content when clicked and the second menu item opens a submenu containing two menu items which insert content when clicked.
4545

@@ -56,10 +56,55 @@ The `+fetchContext+` is an object containing a single string property: `+pattern
5656

5757
The following is a simple toolbar menu button example, where searching has been configured:
5858

59-
liveDemo::custom-toolbar-menu-button-search[tab="js"]
59+
liveDemo::custom-toolbar-menu-button-search[]
6060

6161
This example configures a toolbar menu button with the label `+My searchable button+` that opens the specified menu when clicked. The menu will contain a search input field because `+search+` is not `+false+`. The input field's https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder[placeholder attribute] will be `+Type...+`.
6262

6363
Initially, when the menu opens, the search input field will be empty, and the `+fetch+` function is called with an empty `+pattern+` for its `+fetchContext+`. In that situation, `+fetch+` passes back an array of two items to be rendered in the drop-down menu. When the user types in the input field, `+fetch+` will be called again, except this time, the `+pattern+` property in `+fetchContext+` will reflect the value typed in the input field. For illustration purposes, this example then passes back an item that contains this pattern inside the item's text. In a more real-life example, the `+pattern+` could be used to filter which of the items are passed to the callback.
6464

65+
[[table-picker-menu-item]]
66+
== Adding a table picker to a custom menu
67+
68+
The built-in table grid picker can be added to a custom menu button using a `+fancymenuitem+` with `+fancytype: 'inserttable'+`. This displays the same interactive grid that appears in the Table plugin's menu when xref:table.adoc#table_grid[`+table_grid+`] is enabled.
69+
70+
The `+onAction+` callback receives an object with `+numRows+` and `+numColumns+` properties. Pass these values to the `+mceInsertTable+` command to insert the table.
71+
72+
NOTE: The table picker requires the `+table+` plugin.
73+
74+
liveDemo::custom-table-picker-menu-button[]
75+
76+
=== Example: adding a table picker menu button
77+
78+
[source,js]
79+
----
80+
tinymce.init({
81+
selector: 'textarea',
82+
plugins: 'table',
83+
toolbar: 'inserttable',
84+
menubar: false,
85+
86+
setup: (editor) => {
87+
editor.ui.registry.addMenuButton('inserttable', {
88+
icon: 'table',
89+
tooltip: 'Insert table',
90+
fetch: (callback) => {
91+
callback([
92+
{
93+
type: 'fancymenuitem',
94+
fancytype: 'inserttable',
95+
onAction: (data) => {
96+
editor.execCommand('mceInsertTable', false, {
97+
rows: data.numRows,
98+
columns: data.numColumns,
99+
options: { headerRows: 1 }
100+
});
101+
}
102+
}
103+
]);
104+
}
105+
});
106+
}
107+
});
108+
----
109+
65110
include::partial$misc/onSetup.adoc[]

0 commit comments

Comments
 (0)