<textarea id="custom-toolbar-button">
<p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128"></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/tinymce/6/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
<li>Have a specific question? Try the <a href="https://stackoverflow.com/questions/tagged/tinymce" target="_blank" rel="noopener"><code>tinymce</code> tag at Stack Overflow</a>.</li>
<li>We also offer enterprise grade support as part of <a href="https://www.tiny.cloud/pricing">TinyMCE premium plans</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>Don't forget to check out our other product <a href="http://www.plupload.com" target="_blank">Plupload</a>, your ultimate upload solution featuring HTML5 upload support.</p>
<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-toolbar-button',
toolbar: 'customInsertButton customDateButton',
setup: (editor) => {
editor.ui.registry.addButton('customInsertButton', {
text: 'My Button',
onAction: (_) => editor.insertContent(` <strong>It's my button!</strong> `)
});
const toTimeHtml = (date) => `<time datetime="${date.toString()}">${date.toDateString()}</time>`;
editor.ui.registry.addButton('customDateButton', {
icon: 'insert-time',
tooltip: 'Insert Current Date',
enabled: false,
onAction: (_) => editor.insertContent(toTimeHtml(new Date())),
onSetup: (buttonApi) => {
const editorEventCallback = (eventApi) => {
buttonApi.setEnabled(eventApi.element.nodeName.toLowerCase() !== 'time');
};
editor.on('NodeChange', editorEventCallback);
/* onSetup should always return the unbind handlers */
return () => editor.off('NodeChange', editorEventCallback);
}
});
},
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});
External CSS
This Pen doesn't use any external CSS resources.