Skip to content

Instantly share code, notes, and snippets.

@andreilupu
Last active January 10, 2024 11:09
Show Gist options
  • Save andreilupu/223ea5f58de554793d0cf41ba6e06811 to your computer and use it in GitHub Desktop.
Save andreilupu/223ea5f58de554793d0cf41ba6e06811 to your computer and use it in GitHub Desktop.
TinyMCE Plugin Example
(function () {
/**
* A TinyMCE plugin example and some events handlings.
*/
tinymce.PluginManager.add('gridable', function ( editor, url ) {
// if your plugin needs a toolbar, save it for a larger scope
var toolbar;
/**
* This is how you add a button, later you can add it into toolbar
*/
editor.addButton('node_remove', {
tooltip: "Remove",
icon: 'dashicon dashicons-no',
onclick: function ( event ) {
// do something
}
});
/**
* Create the toolbar with the controls for row
* Also in this example the toolbar will apear only when the focused element is a div and the parent has the class gridable-mceItem
*/
editor.on('wptoolbar', function ( args ) {
if ( args.element.parentElement.nodeName === 'DIV' && args.element.parentElement.className.indexOf('gridable-mceItem') !== -1 ) {
args.toolbar = toolbar;
args.selection = parent[0];
}
});
/**
* Assign buttons for our toolbar
*/
editor.once('preinit', function () {
if ( editor.wp && editor.wp._createToolbar ) {
toolbar = editor.wp._createToolbar([
'node_remove'
]);
}
});
/**
* EVENTS Examples
* More details at https://www.tinymce.com/docs/api/tinymce/tinymce.editor/#events
* Now I will show you a few examples of events handling
* For instance editor events
*/
/**
* When ENTER key is pressed down
*/
editor.on('keydown', function ( evt ) {
if ( evt.keyCode == 13 ) {
// do something
}
});
/**
* This example shows how to bind an event globaly without the chance of losing it accidentally
*/
editor.on( 'init', function ( event ) {
var iframe_document = editor.getBody();
iframe_document = iframe_document.parentNode.parentNode;
editor.dom.bind( iframe_document, 'mousedown', function ( e ) {
// do something when .class_target is clicked
}, '.class_target' );
});
/**
* Take control over the focused element
* Stil, you have to consider performance issues with this event
* https://www.tinymce.com/docs/api/tinymce/tinymce.editor/#nodechange
*/
editor.on( 'NodeChange', function ( event ) {
var node = editor.selection.getNode();
});
/**
* While the content is saved you have one more chance to sanitize it
*/
editor.on( 'submit', function ( event ) {
console.group('submit');
// sanitize content
console.groupEnd('submit');
});
});
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment