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

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 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

    Type your article
    





    Type your article
    

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();
                }
            });
        });
    },