TinyMCE Plugin Example

tinymce.plugin.example.js

(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');
	});

});
})();