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

How To Add a TinyMCE Editor To an Options Page? WordPress

  • SOLVED

Hi,

I would like to know how to add a TinyMCE editor to this options page:
http://net.tutsplus.com/tutorials/wordpress/how-to-create-a-better-wordpress-options-panel/

I've followed this tutorial,
http://www.zen-dreams.com/en/2009/06/30/integrate-tinymce-into-your-wordpress-plugins/
and everything is showing up correctly, but I don't know how to save the data entered to the database.

When I click "Save Changes" nothing gets saved.

It appears the linked tutorial is incomplete because it doesn't contain the information needed to make the TinyMCE editor save the data.

This is the code I'm using now in my functions.php for the case part:

case 'editor':
?>
<div class="rm_input rm_textarea">
<label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label>
<div class="editor_holder"><?php the_editor($content_to_load);?></div>
</div>
<?php
break;


Then for the array part:

array( "name" => "Description Box Contents",
"desc" => "Description copy",
"id" => $shortname."_editor_content",
"type" => "editor",
"std" => ""),



The function to create TinyMCE:

add_filter('admin_head','ShowTinyMCE');
function ShowTinyMCE() {
// conditions here
wp_enqueue_script( 'common' );
wp_enqueue_script( 'jquery-color' );
wp_print_scripts('editor');
if (function_exists('add_thickbox')) add_thickbox();
wp_print_scripts('media-upload');
if (function_exists('wp_tiny_mce')) wp_tiny_mce();
wp_admin_css();
wp_enqueue_script('utils');
do_action("admin_print_styles-post-php");
do_action('admin_print_styles');
}


And calling the contents submitted through the editor in the template:

<?php echo get_option('nt_editor_content'); ?>

Your help is much appreciated.

Answers (6)

2010-10-17

Denzel Chia answers:

Hi,

You said you follow this tutorial for creating options page.
http://net.tutsplus.com/tutorials/wordpress/how-to-create-a-better-wordpress-options-panel/
Did you include step 5? Step 5 updates the input into WordPress options table, using update_option function.

If you include step 5 then something must be wrong with the name attribute of the input field, it must be the same as post and updated into database.

Please paste all your codes here so that people can help you.

Get the option page correct first, make sure you and able to update and get option before adding tiny mce editor.

Thanks


Denzel Chia comments:

You used get_option('nt_editor_content'), make sure in your step 5 you use update_option('nt_editor_content','your_input_name') to save data in wordpress.
Whereby your_input_name is the name attribute of your textarea. This is basic HTML.

2010-10-16

Baki Goxhaj answers:

Try to convert this into a real textarea:

<div class="editor_holder"><?php the_editor($content_to_load);?></div>


Edwin comments:

Could you post a code example of how to do this?
Thanks!


Baki Goxhaj comments:

This simple:

<textarea class="editor_holder"><?php the_editor($content_to_load);?></textarea>


Edwin comments:

Hi Baki,

Unfortunately it didn't work, it basically killed the TinyMCE editor entirely.