WordPress Editor switch between html and visuals not working

  • I need to show the editor on my plugin dynamically. I tried using the javascript code to show editor

    tinyMCE.settings = tinyMCEPreInit.mceInit.content;
  tinyMCE.execCommand('mceAddControl', false, textareaid);

    But it doesnot show the upload and switch editors.

    So I tired using an ajax in my javascript.
    javascript

    dataString = 'action=' + admin_object.action_editor + '&security=' + admin_object.action_editor_security + '&count=' + count;

    jQuery.ajax({
            type: "POST",
            url: admin_object.ajax_url,
            data: dataString,
            success: function(resultData){
                jQuery('.woocommerce_product_tab_wrapper').stop(true).css('opacity', '1').unblock();
                $div_group.append(resultData);
                $div_wrap.append($div_group);
                jQuery('.woocommerce_product_tab_wrapper').append($div_wrap);
                $div_wrap.css('display','none');
                tinyMCE.settings = tinyMCEPreInit.mceInit.content;
                tinyMCE.execCommand('mceAddControl', false, 'wptb_content_'+tab_count);
                switchEditors.switchto({'id' : 'wptb_content_'+tab_count+'-html'});
                jQuery("#wptb_content_"+ tab_count +"_ifr").contents().find(".qp").css("background-color","#00ff00");
                jQuery('.woocommerce_product_tab_wrapper .tabs').find('li.'+tab_title_slug + '_tab a').click();
                tab_count++;
            }
        });

    Ajax function handler

    public function get_editor() {
        check_ajax_referer( 'get-editor', 'security' );
        $tabcount = isset($_POST['count']) ? $_POST['tabcount'] : '';
        if(!is_numeric($count) && $count < 0) die();

        $settings = array(
            'quicktags'     => array( 'buttons' => 'em,strong,link' ),
            'textarea_name' => 'content[]',
            'quicktags'     => true,
            'tinymce'       => true,
            'editor_css'    => '<style>#wp-excerpt-editor-container .wp-editor-area{height:175px; width:100%;background:#FFFFFF;}</style>'
            );

        wp_editor( htmlspecialchars_decode( '' ), 'content_'.$tabcount, $settings );
        die();
    }

    It shows me the upload and the switch editor. But now another error crops up. Initially editor is switched to html mode and buttons shown are visual. When I click the switch editor button to html the editor goes off.

    Can any body help to show the editors by using the javascript.

    Thanks

Viewing 6 replies - 1 through 6 (of 6 total)

  • Are you trying to display the TinyMCE editor in WP-Admin? If so, you should be using wp_editor().

    EDIT: I didn’t read your question carefully enough, sorry. Looks like you are using that function.

    This thread might point you in the right direction: https://wpquestions.com/question/showChrono/id/7818

    Thread Starter blpraveen

    (@blpraveen)

    I want to place the editor dynamically.

    I am using the wp_editor only, but that needs to be activated when I append to html body through jquery.

    I using the editor to give options to the add ‘n’ number of texts editors.

    I tried using javascript 

    tinyMCE.execCommand('mceAddControl', false, textareaid);

    But it did not include the switch editor and the media upload button.

    According to the Codex, there is an issue with the TinyMCE editor where:

    Once instantiated, the WYSIWYG editor cannot be moved around in the DOM. What this means in practical terms, is that you cannot put it in meta-boxes that can be dragged and placed elsewhere on the page.

    That may be what is causing your problem…in which case, the solution recommended in the Codex is to “Instead use ‘edit_page_form’ (for pages) or ‘edit_form_advanced’ (for other post types)”.

    Here is the example given:

    add_action( 'edit_page_form', 'my_second_editor' );
function my_second_editor() {
	// get and set $content somehow...
	wp_editor( $content, 'mysecondeditor' );
}
    Thread Starter blpraveen

    (@blpraveen)

    No. I am not dragging and dropping the metabox.

    I need to place the media button and the switch editor when I use javascript method to convert textarea into tinymce editor

    How do I include Media Upload Button and Switch Editor when I use javascript?

    Right, but the drag-and-drop bit is handled by JavaScript and that doesn’t work…so it stands to reason that TinyMCE does not like to be added or removed from the DOM via JavaScript either.

    You might want to look at how WordPress core adds the editor in /wp-includes/class-wp-editor.php, starting at line 87 with the method _WP_Editors::editor().

    Also, maybe this thread will be helpful? https://stackoverflow.com/questions/9255403/how-to-add-multiple-tinymce-with-dom-javascript

    Sorry I don’t have a solution for ya…

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘WordPress Editor switch between html and visuals not working’ is closed to new replies.