tinymce alternative for depreciated wpdialog() in WordPress 3.9? WordPress
- SOLVED
We use the following code to add a TinyMCE-button on WordPress:
echo "
jQuery(function($) {
$(document).ready(function(){
$('#map_button').remove();
var html_active = true;
if($('#wp-content-wrap').is('.html-active')){
$('#wp-content-media-buttons').append('<a style=\'margin-left:5px;\' class=\'button\' title=\'" . $text_add . "\' id=\'map_button\' href=\'#\'><div style=\'float:left;\'><img src=\'inc/img/icon-tinymce.png\' style=\'padding:0 5px 3px 0;\'></div><div style=\'float:right;padding-top:0px;\'>" . $text_add . "</div></a>');
var info = $('<div id=modal-content style=\'overflow: hidden;\' />');
info.html('<iframe width=\'450\' height=\'407\' scrolling=\'no\' src=\'" . $admin_url . "admin-ajax.php?action=get_mm_list&mode=html\' />')
info.wpdialog({
title : '" . $text_insert . "',
dialogClass: 'wp-dialog',
width : 450,
height : 440,
modal : true,
autoOpen : false,
closeOnEscape : true
});
$(document).on('click', '#map_button', function(event) {
info.wpdialog('open');
return false;
});
}
});
});
Since WordPress 3.9 wpdialog() is a depreciated function (as part of the tinymce plugin) and not loaded on the post/pages edit screens anymore. Re-Enqueuing them via
wp_enqueue_script( array ( 'wpdialogs' ) );
is not an option.
I am looking for a wpdialog() replacement which can be used without any additional scripts. According to https://core.trac.wordpress.org/ticket/16284 TinyMCE has all the functionality to create dialogs which is native, more extended and seems more robust than jQuery UI. That is what I am looking for...
thx
Answers (1)
John Cotton answers:
Hi Robert
Just to be clear, are you trying to use TinyMCE for a custom field in a pop-up?
If so, you definitely should steer clear of the jQuery UI dialog - it doesn't play well with TinyMCE.
If I've understood what you want, I tend to do this kind of thing:
<div id="my_editor_container">
<?php wp_editor( '', 'my_editor', array( 'media_buttons' => false ) ); ?>
</div>
and then handle the layout with some CSS that absolutely positions the container div, displaying and hiding it as I need to.
rmaxwell comments:
Hi John,
no - I am using this code to open a custom window, which allows users to search for maps via ajax - wp_editor() wouldnt help here.
best,
Robert
John Cotton comments:
Sorry - I read TinyMCE and got editor in my head!
John Cotton comments:
You need an editor context (which could come from several places) and then some code like this:
editor.windowManager.open({
title: "My inline dialog",
url: my_url,
width: 500,
height: 400,
inline: 1
});
The inline value is important otherwise you get a browser window.
URL points to your HTML source (eg admin-ajax in your case).
John Cotton comments:
Editor Context - sorry, could have been more helpful.
You may want to get the editor context from an event but - assuming you only have one editor or you don't care which instance the popup is triggered by, this will display your popup:
tinyMCE.get()[0].windowManager.open({
title: "My inline dialog",
width: 500,
height: 400,
inline: 1,
});
rmaxwell comments:
thx - works generally. Only issue is that if just start tinyMCE in text mode, the code does not work. You first have to click the HTML tab in order for this to work. Any idea how to workaround this?
John Cotton comments:
<blockquote>Only issue is that if just start tinyMCE in text mode, the code does not work. You first have to click the HTML tab in order for this to work. Any idea how to workaround this?</blockquote>
I've come across this before, but I was lucky in that my solution didn't need an editor instance which - for you - no longer exists!
The following isn't a very pretty solution, but you might be able to live with it:
var editor_id = 'your_id';
var toggled = false;
if( typeof tinyMCE.get(editor_id) == 'undefined' ) {
// If the editor isn't active, show it
tinymce.execCommand('mceToggleEditor',false, editor_id);
toggled = true;
}
tinyMCE.get()[0].windowManager.open( // etc..
if(toggled) {
// Hide it again
tinymce.execCommand('mceToggleEditor',false, editor_id);
}
rmaxwell comments:
you´re the best, thanks!