Tinymce html5 placeholder by reading attribute from textarea

Question

For standard textareas I use this plugin to create a placeholder. How can I extend tinymce so that this works in this way also.

E.g the default value is read from the

Answer 1

Gaurav's solution works OK, but needs a few changes. I used this modification to make it nearly perfect:

editor.on("init", function(){
    tinymce.DOM.addClass( editor.bodyElement, 'content-editor' );
    if ( editor.getContent() === "" ) {
        tinymce.DOM.addClass( editor.bodyElement, 'empty' );
        var pseudoBeforeHeight = window.getComputedStyle(editor.bodyElement, ':before').height;
        tinymce.DOM.setStyles( editor.bodyElement, { 'height': pseudoBeforeHeight } );
    }
});

Answer 2

I found another method that doesn't ever mess with the content of the textarea. I like this so that I don't have to have special conditions that prevent a user from submitting content that is just the placeholder. The write-up is found here, but I added the onclick method so that the label is clickable-- without this the user has to click either below the <label> or to the side of it. This works great with TinyMCE 4.

style

.tinyMCEPlaceholder {
    top: 45px;
    left: 9px;
    z-index: 1;
    color: #bbbbbb;
    position: absolute;
    cursor:text;
}

html

<div id="holder">
    <label for="tinymce" onclick="tinymce.execCommand('mceFocus',false,'area_id');">Type your article</label>
    <textarea id="comments" id="area_id" class="tinymce" name="comments" cols="40" rows="10"></textarea>
</div>

<!-- or -->

<div id="holder">
    <label for="tinymce" onclick="tinymce.get('area_id').fire('focus',{},false);">Type your article</label>
    <textarea id="comments" id="area_id" class="tinymce" name="comments" cols="40" rows="10"></textarea>
</div>

TinyMCE Setup

 // setup
    setup : function(ed) {
        /* toggle all labels that have the attr 'tinymce' */
        ed.on('init', function() {
            if(ed.getContent() != '') {
                $('label[for="tinymce"]').hide();
            }

            $(ed.getDoc()).contents().find('body').focus(function(){
                $('label[for="tinymce"]').hide();
            });

            $(ed.getDoc()).contents().find('body').blur(function(){
                if(ed.getContent() == '') {
                    $('label[for="tinymce"]').show();
                }
            });
        });
    },