TinyMCE plugin for placeholder attribute support in WordPress
JavaScript
Latest commit eea3038 Mar 23, 2016 @tripflex Update readme.md

readme.md

WordPress TinyMCE Placeholder Plugin

Preview

Preview

This plugin brings HTML5 placeholder attribute functionality for the TinyMCE editor in WordPress. The standard placeholder in the textarea will show when viewing in text mode, this plugin adds a <label> html element that is only shown when viewing the Visual editor.

Usage

  • Add mce.placeholder.js to your site
  • Add to list of WordPress TinyMCE Plugins through filter
  • Set placeholder value of textarea through filter
  • Profit!

Add mce.placeholder.js

Download the mce.placeholder.js file and place it in your theme/plugin directory, or somewhere you know the full URL to.

Add placeholder plugin through filter

add_filter( 'mce_external_plugins', 'add_mce_placeholder_plugin' );

function add_mce_placeholder_plugin( $plugins ){

    // Optional, check for specific post type to add this
    // if( 'my_custom_post_type' !== get_post_type() ) return $plugins;

    $plugins[ 'placeholder' ] = '//domain.com/full/path/to/mce.placeholder.js';

    return $plugins;
}

Set placeholder value in textarea

add_filter( 'the_editor', array( $this, 'set_my_mce_editor_placeholder' ) );

function set_my_mce_editor_placeholder( $textarea_html ){

    // Optional, check for specific post type to add this (remove // to uncomment and use)
    // if( 'my_custom_post_type' !== get_post_type() ) return $plugins;

    $placeholder = __( 'Check it out...this is my custom placeholder!' );

    $textarea_html = preg_replace( '/<textarea/', "<textarea placeholder=\"{$placeholder}\"", $textarea_html );

    return $textarea_html;
}

Profit!