Wordpress TinyMCE in theme-options doesn't save well

Question

This post has some solution, but author wants to improve it
Having read a lot of documentations and forums I couldn't find perfect solution for my problem. I want to use tinyMCE in theme option in admin panel for some reason. I added tiny to page and it shows well, but when I submit - it doesn't save anything. Of course I checked veriables and recognized that no new data was submitted. So, I made up solution simply to copy data from tinyMCE to hidden field and then that hidden field store to database.
Here some code:
theme-options.php

<?php wp_editor($options['king_text1'], 'kingtext', array(
    'wpautop'       => 1,
    'media_buttons' => 1,
    'textarea_name' => '',
    'textarea_rows' => 20,
    'tabindex'      => null,
    'editor_css'    => '',
    'editor_class'  => 'tiny_kingtext',
    'teeny'         => 0,
    'dfw'           => 0,
    'tinymce'       => 1,
    'quicktags'     => 1,
    'drag_drop_upload' => false 
) ); ?>

<textarea id="kingtext" class="large-text" cols="50" rows="10"><?php echo esc_attr_e( $options['king_text1'] ); ?> </textarea>
<input type="hidden" id="myText" name="king_theme_options[king_text1]">

Then I added function of adding custom script to admin panel in head of theme-option file:

function javascript_and_styles() {
    wp_enqueue_script( 'admin-js', get_template_directory_uri() . '/js/admin-panel.js', array(), '', true );
}
add_action('admin_enqueue_scripts', 'javascript_and_styles');

And after that I added some script which copies data from mce to hidden input before submit:

jQuery(function() {
    jQuery('input.button').click(function(e) {
        e.preventDefault();

        var content = tinyMCE.activeEditor.getContent();
        jQuery('#myText').val(content);

        jQuery('#myform').submit();
    });
});

After this everything works, but I don’t like this code and this method of solving the problem. If someone knows more interesting solution, show it. Best regards

dmytro dmytro · Accepted Answer · 2017-06-13T20:01:24

I have just found all my mistakes. This question is solved!
It is very important to understand clearly each property in wp_editor. My problem was that I used both textarea and wp_editor, that is why I had troubles which I had described above. So, if someone has the same situation as me, I would like to get you this recommndation:
You mustn't use real textarea in your code. You start wp_editor like this:

<?php wp_editor($options['king_text1'], 'kingtext', array(
    'wpautop'       => 1,
    'media_buttons' => 1,
    'textarea_name' => 'king_theme_options[king_text1]', //This is important line!!!
    'textarea_rows' => 20,
    'tabindex'      => null,
    'editor_css'    => '',
    'editor_class'  => 'tiny_kingtext',
    'teeny'         => 0,
    'dfw'           => 0,
    'tinymce'       => 1,
    'quicktags'     => 1,
    'drag_drop_upload' => false
) );

After all no other thicks are neccessary. Everything works well: opens, saves etc.

Wordpress TinyMCE in theme-options doesn't save well

1 Answers