Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

option page, media uploader not opened in a thickbox WordPress

  • SOLVED

No time to search the solution myself.

I have a function to create a page (options of theme).
This page contains an editor.
No problem.

Just one strange thing : when i click to add an image the media manager is opened in the same page, not in a lightbox.

Why ?

that's my code :


<?php
add_action('admin_menu', 'slh_panel_menu');

function slh_panel_menu() {
add_menu_page('Réglages du site', 'Option du site', 1, __FILE__, 'slh_panel');
}
function enqueue_editor() {
wp_enqueue_script('common');
wp_enqueue_script('jquery-color');
wp_admin_css('thickbox');
wp_print_scripts('post');
wp_print_scripts('media-upload');
wp_print_scripts('jquery');
wp_print_scripts('jquery-ui-core');
wp_print_scripts('jquery-ui-tabs');
wp_print_scripts('tiny_mce');
wp_print_scripts('editor');
wp_print_scripts('editor-functions');

/* Include the link dialog functions */
require_once ABSPATH . 'wp-admin/includes/internal-linking.php';
wp_print_scripts('wplink');
wp_print_styles('wplink');
add_action('tiny_mce_preload_dialogs', 'wp_link_dialog');

add_thickbox();
wp_tiny_mce();
wp_admin_css();
wp_enqueue_script('utils');
do_action("admin_print_styles-post-php");
do_action('admin_print_styles');
remove_all_filters('mce_external_plugins');
}



function slh_panel() { ?>

<div id="poststuff">
<div id="<?php echo user_can_richedit() ? 'postdivrich' : 'postdiv'; ?>" class="postarea">
<?php the_editor($slh_panel_options['content']); ?>
</div>
</div>
<?php add_action( 'admin_footer', 'wp_tiny_mce_preload_dialogs' );
} ?>

EDIT 1 :
Apparently, wp_tiny_mce_preload_dialogs() got removed and has changed into wp_preload_dialogs(). The tiny_mce_preload_dialogs hook just disappeared with this, breaking a lot of plugins.
-> [[LINK href="http://core.trac.wordpress.org/ticket/18001"]]http://core.trac.wordpress.org/ticket/18001[[/LINK]]

Maybe this can help : [[LINK href="http://dannyvankooten.com/450/tinymce-wysiwyg-editor-in-wordpress-plugin/"]]http://dannyvankooten.com/450/tinymce-wysiwyg-editor-in-wordpress-plugin/[[/LINK]]

EDIT 2 :
the problem seems known : [[LINK href="http://wordpress.stackexchange.com/questions/22599/wordpress-3-2-has-broken-my-tinymce-code"]]http://wordpress.stackexchange.com/questions/22599/wordpress-3-2-has-broken-my-tinymce-code[[/LINK]]

EDIT 3 :

My original code is :

<?php
add_action('admin_menu', 'slh_panel_menu');
function slh_panel_menu() {
add_menu_page('Réglages du site', 'Option du site', 1, __FILE__, 'slh_panel');
}
function enqueue_editor() {
wp_enqueue_script('common');
wp_enqueue_script('jquery-color');
wp_admin_css('thickbox');
wp_print_scripts('post');
wp_print_scripts('media-upload');
wp_print_scripts('jquery');
wp_print_scripts('jquery-ui-core');
wp_print_scripts('jquery-ui-tabs');
wp_print_scripts('tiny_mce');
wp_print_scripts('editor');
wp_print_scripts('editor-functions');
/* Include the link dialog functions */
require_once ABSPATH . 'wp-admin/includes/internal-linking.php';
wp_print_scripts('wplink');
wp_print_styles('wplink');
add_action('tiny_mce_preload_dialogs', 'wp_link_dialog');
add_thickbox();
wp_tiny_mce();
wp_admin_css();
wp_enqueue_script('utils');
do_action("admin_print_styles-post-php");
do_action('admin_print_styles');
remove_all_filters('mce_external_plugins');
}
function slh_panel() {
$template_uri = get_template_directory_uri();
if( $_POST ) {
$slh_panel_options_old = get_option( 'slh_panel_options' );
$slh_panel_options = $_POST;
//$slh_panel_options['content'] = stripslashes( $_POST['content'] );
update_option('slh_panel_options', $slh_panel_options);

?>

<div class="updated"><center> Les réglages sont enregistrés !</center></div>
<?php
}
$slh_panel_options = get_option('slh_panel_options');
?>
<form name="slh_form" id="slh_form" action="" method="post" enctype="multipart/form-data">
<div id="poststuff"><? echo $slh_panel_options['content']; ?>
<div id="<?php echo user_can_richedit() ? 'postdivrich' : 'postdiv'; ?>" class="postarea">
<?php the_editor($slh_panel_options['content']); ?>
</div>
</div>
<?php /* Insert the dialog box that's used by the "link" button */
//add_action( 'admin_footer', 'wp_tiny_mce_preload_dialogs' );
?>
<div id="heading">
<fieldset>
<input value="" class="save" type="submit">
</fieldset>
</div><!-- heading ends -->
</form>
<?php
} ?>
with this code i can saved the content of my editor, no problem.
But i can't use the media uploader because the thickbox doesn't work.
So i need a code to use correctly the media uploader with my editor.

If i add this code at the top :
add_action("admin_head","myplugin_load_tiny_mce");
function myplugin_load_tiny_mce() {
wp_tiny_mce( false ); // true gives you a stripped down version of the editor
}
no problem, the content is yet saved... but the problem with the media uploader isn't resolved

If i add at the top of my first code, this lines :
add_action('admin_head', 'enqueue_editor');
the content isn't saved

2011-12-03 by Sébastien | French WordpressDesigner

Answers (5)

2011-12-04

jevusi answers:

Sebastien, the code you need is very simple :

<?php

wp_enqueue_script(array('jquery', 'editor', 'thickbox', 'media-upload'));
wp_enqueue_style('thickbox');

add_action("admin_head","myplugin_load_tiny_mce");

function myplugin_load_tiny_mce() {
wp_tiny_mce( false );
}


and your original code :


add_action('admin_menu', 'slh_panel_menu');
function slh_panel_menu() {
add_menu_page('Réglages du site', 'Option du site', 1, __FILE__, 'slh_panel');
}

function slh_panel() {
$template_uri = get_template_directory_uri();
if( $_POST ) {
$slh_panel_options_old = get_option( 'slh_panel_options' );
$slh_panel_options = $_POST;
$slh_panel_options['content'] = stripslashes( $_POST['content'] );
update_option('slh_panel_options', $slh_panel_options);

?>

<div class="updated"><center> Les réglages sont enregistrés !</center></div>
<?php
}
$slh_panel_options = get_option('slh_panel_options');
?>
<form name="slh_form" id="slh_form" action="" method="post" enctype="multipart/form-data">
<div id="poststuff"><? echo $slh_panel_options['content']; ?>
<div id="<?php echo user_can_richedit() ? 'postdivrich' : 'postdiv'; ?>" class="postarea">
<?php the_editor($slh_panel_options['content']); ?>
</div>
</div>


<div id="heading">
<fieldset>
<input value="" class="save" type="submit">
</fieldset>
</div><!-- heading ends -->
</form>
<?php
} ?>

jevusi comments:

yeh Jevusi ! Awesome ! It's totally perfect ! Thanks ! That's excatly the response i need !

jevusi comments:

Is it not what you want to say to me ? ^^

2011-12-03

Just Me answers:

I expect this is not all of your code, coz I dropped it into functions.php of one of my test-sites and it didn't work.

Are you using
define('WP_DEBUG', true);
in your wp-config file?

Also the title of the page (Réglages du site) showed up weird in the browser's tab at the top of the screen. Not sure if that is a problem.

I know it is not really an answer but in debug mode you will probably be able to find errors more easily.

Sébastien | French WordpressDesigner comments:

"it didn't work" said you...
you don't see the visual editor ?

Just Me comments:

the visial editor shows up but a lot of debug messages too, and the buttons to insert media don't work at all.

did you try activating the thickbox through an action like
add_action('init','thickbox')

Sébastien | French WordpressDesigner comments:

a dd this line but the problem is still here...

have you seens my edit in my question ?

Just Me comments:

Noticed your edits a little late, sorry.

The links you provided give this solution
add_action("admin_head","myplugin_load_tiny_mce");

function myplugin_load_tiny_mce() {

wp_tiny_mce( false ); // true gives you a stripped down version of the editor

}

but you should also add 'editor' to the 'supports' args array

Sébastien | French WordpressDesigner comments:

i understand, but i need a code.
Could you paste the code here please ? :-)

Just Me comments:

Actually I need some code too, your code :)

Did you set up some kind of custom type? It seems to me you are only showing (or have only developed) half of the system.

Sébastien | French WordpressDesigner comments:

that's my code

<?php
add_action('admin_menu', 'slh_panel_menu');

function slh_panel_menu() {
add_menu_page('Réglages du site', 'Option du site', 1, __FILE__, 'slh_panel');
}
add_action("admin_head","myplugin_load_tiny_mce");
function myplugin_load_tiny_mce() {
wp_tiny_mce( false ); // true gives you a stripped down version of the editor
}

add_action('admin_head', 'enqueue_editor');
function enqueue_editor() {//ajoute un editeur visuel
wp_enqueue_script('common');
wp_enqueue_script('jquery-color');
wp_admin_css('thickbox');
wp_print_scripts('post');
wp_print_scripts('media-upload');
wp_print_scripts('jquery');
wp_print_scripts('jquery-ui-core');
wp_print_scripts('jquery-ui-tabs');
wp_print_scripts('tiny_mce');
wp_print_scripts('editor');
wp_print_scripts('editor-functions');
/* Include the link dialog functions */
require_once ABSPATH . 'wp-admin/includes/internal-linking.php';
wp_print_scripts('wplink');
wp_print_styles('wplink');
//add_action('tiny_mce_preload_dialogs', 'wp_link_dialog');
add_thickbox();
wp_tiny_mce();
wp_admin_css();
wp_enqueue_script('utils');
do_action("admin_print_styles-post-php");
do_action('admin_print_styles');
remove_all_filters('mce_external_plugins');
}



function slh_panel() {

$template_uri = get_template_directory_uri();

if( $_POST ) {
$slh_panel_options_old = get_option( 'slh_panel_options' );
$slh_panel_options = $_POST;

//$slh_panel_options['content'] = stripslashes( $_POST['content'] );




update_option('slh_panel_options', $slh_panel_options);

?>


<div class="updated"><center> Les réglages sont enregistrés !</center></div>
<?php
}
$slh_panel_options = get_option('slh_panel_options');
?>

<form name="slh_form" id="slh_form" action="" method="post" enctype="multipart/form-data">

<div id="poststuff">
<div id="<?php echo user_can_richedit() ? 'postdivrich' : 'postdiv'; ?>" class="postarea">
<?php the_editor($slh_panel_options['content']); ?>
</div>
</div>
<?php /* Insert the dialog box that's used by the "link" button */
//add_action( 'admin_footer', 'wp_tiny_mce_preload_dialogs' );
?>





<div id="heading">
<fieldset>
<input value="" class="save" type="submit">
</fieldset>
</div><!-- heading ends -->
</form>

<?php
}
?>




i use wp 3.2

http://core.trac.wordpress.org/ticket/18001
this link seems to say that wp3.2 need another method.

<blockquote> "wp_tiny_mce_preload_dialogs() got removed and has changed into wp_preload_dialogs(). The tiny_mce_preload_dialogs hook just disappeared with this, breaking a lot of plugins."</blockquote>


Could you write the code for wp3.2 please ?

Just Me comments:

change this line


function slh_panel_menu() {

add_menu_page('Réglages du site', 'Option du site', 1, __FILE__, 'slh_panel');

}

into


function slh_panel_menu() {

add_menu_page('Réglages du site', 'Option du site', 'manage_options', __FILE__, 'slh_panel');


}

Sébastien | French WordpressDesigner comments:

that doesn't work : the content of the editor isn't save...

Just Me comments:

Your question was about opening in thickbox.

I don't think you can expect people to validate all of your code for $10

Sébastien | French WordpressDesigner comments:

My question was about opening in thickbox... but i need a media-uploader... not a broken media uploader ;-)

Just Me comments:

Then you should have asked for exactly that. Your initial question made it seem everything was working fine except the thick-box feature. So that is all I tested.

Now that is more clear what you are looking for, people may point you to other plugins or systems that do exactly what you want, solving your problem without solving your issue with this one. Good luck!

Sébastien | French WordpressDesigner comments:

Hey : YES, my initial code work fine ! The content was saved with this code !
I want a thickbox, OK ! but i don't want to break my editor ! Now the content isn't saved, so all solutions, for the moment, are not OK.

Have you a solution with a thickbox AND the content saved ?? Yes you have, so i paid you. If you don't have a good response, do i paid you ?

Just Me comments:

Don't worry, I don't want your money.
Pay the next guy who solves it.

2011-12-03

Jurre Hanema answers:

Well, first of all, the function wp_tiny_mce_preload_dialogs and the action tiny_mce_preload_dialogs don't even exist.

I'm not really sure how to make this work though.

Sébastien | French WordpressDesigner comments:

that could be the response... I have find this :
http://wordpress.org/support/topic/tinymce-32-and-wp_tiny_mce_preload_dialogs

2011-12-03

Kannan C answers:

i think the problem is because of thickbox.css may not loaded in your options.page
verify generated code and check thickbox.css is there

Sébastien | French WordpressDesigner comments:

no thickbox.css in my source !

Sébastien | French WordpressDesigner comments:

Is "source" an english word ? Do you understand this word ?

Kannan C comments:

actually you didn't included your scripts and styles to admin
add this line

add_action('admin_head', 'enqueue_editor');

Sébastien | French WordpressDesigner comments:

i add this line but thickbox.css is not in the source

Kannan C comments:

Sebastien,
i pasted your code in my theme's function.php and after adding the above mentioned line, i can now open the media boxes in the thickbox. Are you using/adding any other scripts? that may be conflict with this?

Sébastien | French WordpressDesigner comments:

paste your code here, i try it

Kannan C comments:


add_action('admin_menu', 'slh_panel_menu');

function slh_panel_menu() {
add_menu_page('Réglages du site', 'Option du site', 1, __FILE__, 'slh_panel');
}

add_action('admin_head', 'enqueue_editor');
function enqueue_editor() {
wp_enqueue_script('common');
wp_enqueue_script('jquery-color');
wp_admin_css('thickbox');
wp_print_scripts('post');
wp_print_scripts('media-upload');
wp_print_scripts('jquery');
wp_print_scripts('jquery-ui-core');
wp_print_scripts('jquery-ui-tabs');
wp_print_scripts('tiny_mce');
wp_print_scripts('editor');
wp_print_scripts('editor-functions');

/* Include the link dialog functions */
require_once ABSPATH . 'wp-admin/includes/internal-linking.php';
wp_print_scripts('wplink');
wp_print_styles('wplink');
add_action('tiny_mce_preload_dialogs', 'wp_link_dialog');
add_thickbox();
wp_tiny_mce();
wp_admin_css();
wp_enqueue_script('utils');
do_action("admin_print_styles-post-php");
do_action('admin_print_styles');
remove_all_filters('mce_external_plugins');
}

function slh_panel() { ?>

<div id="poststuff">

<div id="<?php echo user_can_richedit() ? 'postdivrich' : 'postdiv'; ?>" class="postarea">
<?php the_editor($slh_panel_options['content']); ?>
</div>
</div>

<?php
}


And if you are using the_editor(), then there is no need to use wp_preload_dialogs()

Sébastien | French WordpressDesigner comments:

so i use your code
i have delete the line : add_action('tiny_mce_preload_dialogs', 'wp_link_dialog');

now the media-uploader is in a thickbox, that's cool. But when i save the content, the content become empty...

Sébastien | French WordpressDesigner comments:

i use wp 3.2

[[LINK href="http://core.trac.wordpress.org/ticket/18001"]]http://core.trac.wordpress.org/ticket/18001[[/LINK]]
this link seems to say that wp3.2 need another method.
<blockquote>"wp_tiny_mce_preload_dialogs() got removed and has changed into wp_preload_dialogs(). The tiny_mce_preload_dialogs hook just disappeared with this, breaking a lot of plugins."</blockquote>
Could you write the code for wp3.2 please ?

Kannan C comments:

what method you are using to save the data? update_option()?
can you post that data saving part?

Kannan C comments:

i just saw you posted the data saving part. i can see the saved content in the editor using your code exactly. Why not you upgrade the wp version to 3.2.1 and try again? i am using wp3.2.1

Sébastien | French WordpressDesigner comments:

Done : i have upgrade to 3.2.1 but the content of the editor isn't saved.

2011-12-03

Luis Abarca answers:

I got this error

<blockquote>Warning: call_user_func_array() [function.call-user-func-array]: First argument is expected to be a valid callback, 'wp_tiny_mce_preload_dialogs' was given in /home/blanco/public_html/wp-includes/plugin.php on line 405</blockquote>

And also found this about the <strong>tiny_mce_preload_dialogs</strong> hook

[[LINK href="http://core.trac.wordpress.org/ticket/18001"]]http://core.trac.wordpress.org/ticket/18001[[/LINK]]

Sébastien | French WordpressDesigner comments:

hum... and ? :-)

Sébastien | French WordpressDesigner comments:

this link is in my question :-)

Luis Abarca comments:

I add the line as Kannan Said.


add_action('admin_head', 'enqueue_editor');


And shows the thickbox, but i still getting the warning:
Warning: call_user_func_array() [function.call-user-func-array]: First argument is expected to be a valid callback, 'wp_tiny_mce_preload_dialogs'

Sébastien | French WordpressDesigner comments:

i use wp 3.2

[[LINK href="http://core.trac.wordpress.org/ticket/18001"]]http://core.trac.wordpress.org/ticket/18001[[/LINK]]
this link seems to say that wp3.2 need another method.
<blockquote>"wp_tiny_mce_preload_dialogs() got removed and has changed into wp_preload_dialogs(). The tiny_mce_preload_dialogs hook just disappeared with this, breaking a lot of plugins."</blockquote>
Could you write the code for wp3.2 please ?