Inline Editing with wp_editor and tinymce (problem with textarea)

Question

Inline Editing with wp_editor and tinymce (problem with textarea)

Gixty

2022年4月10日 22:02

I want to use the new inline editing from tinymce with the wp_editor function in wordpress.

Here is some info on how to set up tinymce inline editing http://www.tinymce.com/tryit/inline.php

The code I am using to call wp_editor is as follows:

$editor_settings = array('dfw' = true,'quicktags' = false);
wp_editor( $postcontent, 'postcontent', $editor_settings );

And in functions.php I have the following to enable inline editing:

function mce_inline( $init ) {

    $init['inline'] = true;

    return $init;
}
add_filter('tiny_mce_before_init', 'mce_inline');

The problem here is that wp_editor is calling the editor and setting up a textarea. In order for tinymce inline editing to work correctly, we need to remove the textarea and replace it with a editable div element as tinymce.com says so.

div class="editable" style="width:100%; height:550px"
This is an editable div element element.
/div

Thus, my question is, how can I configure wp_editor so it replaces the textarea with a div element?

Topic wp-editor tinymce Wordpress

Category Web

Hooman Askari · Accepted Answer · 2015年8月24日 15:18

I am still experiencing with this, but here is how I got rid of the unwanted text area:

if ( !is_admin() ) { //you might decide to change this conditional statement.

    //I found the filter in /wp-includes/class-wp-editor.php @249
    add_filter('the_editor', 'my_remove_editor_te');
    function my_remove_editor_te(){
        $editor = '';
        return $editor;

        // or simply return;
    }

}

Here is how I have initiated my editor:

wp_editor( '', '', array(
    'textarea_rows' => '',
    'quicktags'     => false,
    'media_buttons' => false,
    'tinymce'       => array(
        'selector'         => '#comment-editable',
        'content_css'      => false,
        'inline'           => true,
    ),
) );

You also need a div with an ID of #comment-editable or just set the selector option to your container DIV's ID or class.

I am not quite sure about the filter that removes the text area, since it's a general filter it's going to remove the text areas for the wp_editor as long as it's not the admin panel, you may run into problem, if so change the conditions under which that filter is initialized.

If you have other ideas share please.

Inline Editing with wp_editor and tinymce (problem with textarea)

About