How To Insert Image In WordPress via Context Menu? • takien.com

Blogging using WordPress

In WordPress, you can add or insert image easily using Add Media button above the WordPress editor toolbar. Yes, there’s no problem with it, except you have to move your mouse cursor there. If you think it’s too much efforts to do it, now you can simplify the access to Add Media button via context menu on your WordPress editor using Insert Image Context Menu plugin.

Thank God, WordPress uses TinyMCE, the most popular WYSIWYG editor which is very customizable and supports many plugins. For this purpose, I use contextmenu plugin (https://www.tinymce.com/docs/plugins/contextmenu/). This plugin, if added to TinyMCE will replace native browser context menu to our own custom menus.

Here is the plugin code:

File: insert-image-contextmenu.php

This is the main file, add WordPress action and filter to load TinyMCE plugin.

<?php
/*
Plugin Name: Insert Image Context Menu
Plugin URI: /
Description: Add context menu on WordPress editor contains link to insert image.
Author: Takien
Version: 1.0
*/

add_action( 'admin_init', 'insert_imagecontextmenu_tinymce_button' );
add_filter( 'tiny_mce_before_init', 'insert_imagecontextmenu_context_menu' );

function insert_imagecontextmenu_tinymce_button() {
     if ( current_user_can( 'edit_posts' ) && current_user_can( 'edit_pages' ) ) {
          add_filter( 'mce_external_plugins', 'insert_imagecontextmenu_add_tinymce_button' );
     }
}

function insert_imagecontextmenu_add_tinymce_button( $plugin_array ) {
     $plugin_array['contextmenu'] = plugins_url( '/tinymce/plugins/contextmenu/plugin.min.js', __FILE__ ) ;
     $plugin_array['image_contextmenu'] = plugins_url( '/tinymce/plugins/image-contextmenu/image-contextmenu.js', __FILE__ ) ;
     return $plugin_array;
}

function insert_imagecontextmenu_context_menu( $in ) {
	$in['contextmenu'] = 'image_contextmenu';
	return $in;
}

File: image-contextmenu.js

This is the TinyMCE plugin to add menu item in context menu, when clicked, it simply trigger to click Insert Media button.

tinymce.PluginManager.add('image_contextmenu', function(editor) {
	editor.addMenuItem('image_contextmenu', {
		icon: 'image',
		text: 'Insert image',
		onclick: function() {
			document.getElementById('insert-media-button').click();
		},
		context: 'insert',
		prependToContext: true
	});
});

Note

This plugin will replace native browser context menu. But you can still access native menu (cut, copy etc) by holding CTRL key when right click on the editor.

Plugin in action

Wanna this plugin? Download it from Github using the following link:

Download Insert Image Context Menu plugin