tinymce - How to add placeholder in wp_editor?

admin管理员组

文章数量:1124174

i would like to add placeholder when using wp_editor() function.

I tried to pass placeholder attribute in textarea, but didn't work. I tried to pass it in settings

 wp_editor( 
     $project_description , 
     'project_description', 
     array(
         'wpautop'       => true,
         'media_buttons' => false,
         'textarea_name' => 'project_description',
         'editor_class'  => 'is-project-description-textarea',
         'textarea_rows' => 5,
         //'textarea_placeholder' => 'Project Description WP Editor Default',
         'placeholder' => 'Project Description WP Editor Default 2'
     ) 
 );

I checked then the _WP_Editors::parse_settings( string $editor_id, array $settings ): array

Also tried to replace <textarea with <textarea placeholder="

 $wpEditorPlaceholder = 'My Placeholder';
 $wpEditor = wp_editor( 
     $project_description , 
     'project_description', 
     array(
         'wpautop'       => true,
         'media_buttons' => false,
         'textarea_name' => 'project_description',
         'editor_class'  => 'is-project-description-textarea',
         'textarea_rows' => 5,
     ) 
 );
 $wpEditorNew = str_replace('<textarea', '<textarea placeholder="' . $wpEditorPlaceholder . '" ', $wpEditor);
 echo $wpEditorNew;

but didn't work and then i added it via add_action

add_action('the_editor', 'add_placeholder_to_editor');
function add_placeholder_to_editor($editorMarkup)
{
    if (str_contains($editorMarkup, 'is-project-description-textarea')) { 
        $editorMarkup = str_replace('<textarea', '<textarea placeholder="Hello"', $editorMarkup);
    }
    return $editorMarkup;
}

Placeholder added successfully but it didn't show it when js loaded

Then i thought to add tinymce in settings

wp_editor( 
     $project_description , 
     'project_description', 
     array(
         'wpautop'       => true,
         'media_buttons' => false,
         'textarea_name' => 'project_description',
         'editor_class'  => 'is-project-description-textarea',
         'textarea_rows' => 5,
         'tinymce'   => array(
            'paste_as_text' => true,
            'placeholder' => 'Project Description',
         )
     ) 
 );

Key paste_as_text worked but key placeholder didn't work.

What i miss? How can i add placeholder attribute?

i would like to add placeholder when using wp_editor() function.

I tried to pass placeholder attribute in textarea, but didn't work. I tried to pass it in settings

 wp_editor( 
     $project_description , 
     'project_description', 
     array(
         'wpautop'       => true,
         'media_buttons' => false,
         'textarea_name' => 'project_description',
         'editor_class'  => 'is-project-description-textarea',
         'textarea_rows' => 5,
         //'textarea_placeholder' => 'Project Description WP Editor Default',
         'placeholder' => 'Project Description WP Editor Default 2'
     ) 
 );

I checked then the _WP_Editors::parse_settings( string $editor_id, array $settings ): array

Also tried to replace <textarea with <textarea placeholder="

 $wpEditorPlaceholder = 'My Placeholder';
 $wpEditor = wp_editor( 
     $project_description , 
     'project_description', 
     array(
         'wpautop'       => true,
         'media_buttons' => false,
         'textarea_name' => 'project_description',
         'editor_class'  => 'is-project-description-textarea',
         'textarea_rows' => 5,
     ) 
 );
 $wpEditorNew = str_replace('<textarea', '<textarea placeholder="' . $wpEditorPlaceholder . '" ', $wpEditor);
 echo $wpEditorNew;

but didn't work and then i added it via add_action

add_action('the_editor', 'add_placeholder_to_editor');
function add_placeholder_to_editor($editorMarkup)
{
    if (str_contains($editorMarkup, 'is-project-description-textarea')) { 
        $editorMarkup = str_replace('<textarea', '<textarea placeholder="Hello"', $editorMarkup);
    }
    return $editorMarkup;
}

Placeholder added successfully but it didn't show it when js loaded

Then i thought to add tinymce in settings

wp_editor( 
     $project_description , 
     'project_description', 
     array(
         'wpautop'       => true,
         'media_buttons' => false,
         'textarea_name' => 'project_description',
         'editor_class'  => 'is-project-description-textarea',
         'textarea_rows' => 5,
         'tinymce'   => array(
            'paste_as_text' => true,
            'placeholder' => 'Project Description',
         )
     ) 
 );

Key paste_as_text worked but key placeholder didn't work.

What i miss? How can i add placeholder attribute?

• tinymce
• editor
• wp-editor

Share Improve this question asked Mar 8, 2024 at 8:57 SakSak 2344 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Your approach to replace <textarea with <textarea placeholder=" is correct. Just wp_editor function does not returns html code, which you can change. Function just echoes output.

You can capture this output with ob_start and ob_get_clean, as described here:

  $wpEditorPlaceholder = 'My Placeholder';
  ob_start();
  wp_editor( 
     $project_description , 
     'project_description', 
     array(
         'wpautop'       => true,
         'media_buttons' => false,
         'textarea_name' => 'project_description',
         'editor_class'  => 'is-project-description-textarea',
         'textarea_rows' => 5,
     ) 
  );
  $wpEditor = ob_get_clean();
  $wpEditorNew = str_replace('<textarea', '<textarea placeholder="' . 
  $wpEditorPlaceholder . '" ', $wpEditor);
  echo $wpEditorNew;

Or, even, you can add placeholder with the action. Unfortunately, there's no TinyMCE setting for adding placeholder, but you can use two filters to add placeholder: wp_editor_settings - to remember placeholder value and the_editor - to alter <textarea> tag.

Example code for your functions.php, or for your plugin:

class AddPlaceholderTinyMCE {
    private $placeholder = '';

    public function __construct()
    {
        add_filter( 'wp_editor_settings', array( $this, 'wp_editor_settings_callback' ), 10, 2 );
    }

    public function wp_editor_settings_callback( $settings, $editor_id ) {
        if ( ! empty( $settings['tinymce']['placeholder'] ) ) {
            $this->placeholder = $settings['tinymce']['placeholder'];
            add_filter( 'the_editor', array( $this, 'the_editor_callback' ) );
        }
    }

    public function the_editor_callback( $html ) {
        remove_filter( 'the_editor', array( $this, 'the_editor_callback' ) );
        return str_replace( '<textarea', '<textarea placeholder="' . esc_attr( $this->placeholder ) . '"', $html );
    }
}

new AddPlaceholderTinyMCE();

When you call wp_editor with placeholder setting for tinymce, it will show you specified placeholder value:

wp_editor( 
     $project_description , 
     'project_description', 
     array(
         ...
         'tinymce'   => array(
            'placeholder' => 'Project Description',
         )
     ) 
 );

本文标签： tinymceHow to add placeholder in wpeditor