TinyMCE4 Image Button

[josh401]

Hi Guys... this may be specifically for Andrew Ozz.. not sure.

In the TinyMCE4 source.. there is a button for image insertion.

Using WordPress 3.9... adding this button image does not display the image icon in the editor. I have confirmed this to be true on TinyMCE Advanced also. You can move the image button to an editor row.. but it does not display when loading the actual editor.

I took the plugin.min.js (for the image addon) from tinymce core... changed the plugin and button name to image_orig, and I am able to add the button successfully to the editor... and it functions properly.

Are we doing something to the default image button which is preventing it from loading in the editor?

Thanks for your time.

[nacin]

Moving to 3.9.1 for review.

[iseulde]

When I add the image plugin and image button to WordPress 3.9 everything works. The plugin button appears and the modal shows. Could you give the code you're adding?

[iseulde]

I also tested TinyMCE advanced, but it looks like it's not loading the image plugin...

[josh401]

It may have already been updated in core.. I saw Andrew had commented to a few people on Tinymce Advanced regarding the same issue.

But, just add image to any of the button filters.. or the 'tiny_mce_before_init()' filter. I'll dig up my code and post it here momentarily.

The image addon files (plugin.min.js) actually reside in the WP core wp-includes/js/tinymce/plugins/image/plugin.min.js. So, you don't have to initialize the file... just add the button.

[azaozz]

Yes, the 'image' plugin is included in WordPress but is not used by default in the "main" editor. It's used in the PressThis editor, a.k.a. "teeny_mce".

When the image button is added to the main editor configuration, the image plugin has to be added to MCE's plugins setting (not external_plugins as the file is either pre-loaded or at the default location). Best done with the 'tiny_mce_plugins' filter.

[josh401]

Got it. Fair enough. Thank you, Andrew, for all your hard work! And thank you for the clarification.
Marking this ticket as 'won't fix', I guess?

[harmr]

Hi guys,
may I ask your help on this issue? I also use a custom tinymce editor both on my free and premium plugin (demo: ​https://demo.mapsmarker.com/wp-admin/admin.php?page=leafletmapsmarker_marker - no login required) and users have reported that the image edit buttons are not showing up anymore when hovering an added image since WP3.9.

I use the following code to load the editor:

$popuptext_sanitzed = '...';
$settings = array(
	'wpautop' => true,
	'tinymce' => array(
		'height' => '250',
		'content_css' => LEAFLET_PLUGIN_URL . 'inc/css/leafletmapsmarker-admin-tinymce.php?defaults_marker_popups_maxwidth=' . $defaults_marker_popups_maxwidth . '&defaults_marker_popups_image_css=' . $defaults_marker_popups_image_css . '',
		'setup' => 'function(ed) { 
						ed.on("keyup", function(ed,e) {
							...
							unsaved = true;
						});
				}'
	 ),
'quicktags' => array('buttons' => 'strong,em,link,block,del,ins,img,code,close'));
wp_editor( $popuptext_sanitized, 'popuptext', $settings);

so after reading this ticket I tried to change my code into

$popuptext_sanitzed = '...';
$settings = array(
	'wpautop' => true,
	'tinymce' => array(
		'plugins' => 'image',
		'height' => '250',
		'content_css' => LEAFLET_PLUGIN_URL . 'inc/css/leafletmapsmarker-admin-tinymce.php?defaults_marker_popups_maxwidth=' . $defaults_marker_popups_maxwidth . '&defaults_marker_popups_image_css=' . $defaults_marker_popups_image_css . '',
		'setup' => 'function(ed) { 
						ed.on("keyup", function(ed,e) {
							...
							unsaved = true;
						});
				}'
	 ),
'quicktags' => array('buttons' => 'strong,em,link,block,del,ins,img,code,close'));
wp_editor( $popuptext_sanitized, 'popuptext', $settings);

Didn´t work though.

I also tried to add the tinymce_plugins filter in the main plugin file, but this did also not work (not so sure about the usage here, so perhaps this is the issue, as I tried different ways:

apply_filters( 'tiny_mce_plugins', 'image', 'popuptext');
apply_filters( 'tiny_mce_plugins', array(&$this, 'image', 'popuptext'));
...

Any hint on how to solve this would really be appreciated!
thx,
Robert

[harmr]

Short update: I found out that loading custom css via 'content_css' is causing the edit and remove button on images to disappear. Is that not supported with TinyMCE4 within WordPress anymore?

[azaozz]

Replying to harmr:

It is supported but setting it from there overwrites all the rest of the stylesheets. In 3.9 there are 3 more of them. Better to use the 'mce_css' filter, see https://core.trac.wordpress.org/browser/tags/3.9.1/src/wp-includes/class-wp-editor.php#L537.

[harmr]

thanks for the explanation azaozz - will try to add my custom CSS via filters

[harmr]

thanks azaozz - that worked. For the record - I use the following code now for applying the custom css via filter:

function lmm_plugin_mce_css( $mce_css ) {
	global $wp_version;
	$lmm_options = get_option( 'leafletmapsmarker_options' );
	$defaults_marker_popups_maxwidth = intval($lmm_options['defaults_marker_popups_maxwidth'] + 1);
	$defaults_marker_popups_image_css = urlencode(htmlspecialchars($lmm_options['defaults_marker_popups_image_css']));						
	$custom_tinymce_css = LEAFLET_PLUGIN_URL . 'inc/css/leafletmapsmarker-admin-tinymce.php?defaults_marker_popups_maxwidth=' . $defaults_marker_popups_maxwidth . '&defaults_marker_popups_image_css=' . $defaults_marker_popups_image_css . '&wordpress_version='.$wp_version.'&timestamp='.time();
	if ( ! empty( $mce_css ) ) {
		$mce_css .= ',';
	}
	$mce_css .= $custom_tinymce_css;
	return $mce_css;
}
add_filter( 'mce_css', 'lmm_plugin_mce_css' );