Custom menu item
优质
小牛编辑
128浏览
2023-12-01
This example shows you how to add some simple menu items to a new “custom” menu.
TinyMCE HTML JS Edit on CodePen
<textarea id="custom-menu-item">
<p style="text-align: center; font-size: 15px;">
<img title="TinyMCE Logo" src="//www.tiny.cloud/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" />
</p>
<h2 style="text-align: center;">Welcome to the TinyMCE editor demo!</h2>
<p>Select a menu item from the listbox above and it will insert contents into the editor at the caret position.</p>
<h2>Got questions or need help?</h2>
<ul>
<li>Our <a href="https://www.tiny.cloud/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
<li>Have a specific question? Visit the <a href="https://community.tinymce.com/forum/">Community Forum</a>.</li>
<li>We also offer enterprise grade support as part of <a href="https://www.tiny.cloud/pricing">TinyMCE Enterprise</a>.</li>
</ul>
<h2>Found a bug?</h2>
<p>If you think you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.</p>
<h2>Finally ...</h2>
<p>Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br/>
All the best from the TinyMCE team.</p>
</textarea>
tinymce.init({
selector: "textarea#custom-menu-item",
height: 500,
toolbar: false,
menubar: "custom",
menu: {
custom: { title: "Custom menu", items: "basicitem nesteditem toggleitem" }
},
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//www.tiny.cloud/css/codepen.min.css'
],
setup: function (editor) {
var toggleState = false;
editor.ui.registry.addMenuItem('basicitem', {
text: 'My basic menu item',
onAction: function () {
editor.insertContent('<p>Here\'s some content inserted from a basic menu!</p>');
}
});
editor.ui.registry.addNestedMenuItem('nesteditem', {
text: 'My nested menu item',
getSubmenuItems: function () {
return [
{
type: 'menuitem',
text: 'My submenu item',
onAction: function () {
editor.insertContent('<p>Here\'s some content inserted from a submenu item!</p>');
}
}
];
}
});
editor.ui.registry.addToggleMenuItem('toggleitem', {
text: 'My toggle menu item',
onAction: function () {
toggleState = !toggleState;
editor.insertContent('<p class="toggle-item">Here\'s some content inserted from a toggle menu!</p>');
},
onSetup: function (api) {
api.setActive(toggleState);
return function () {};
}
});
}
});