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

Try this code:

Add a placeholder text for the tinyMCE inline editor:

    $scope.ContentOptions = {
    setup: function(editor) {

        editor.on('init', function () {
            // Default classes of tinyMCE are a bit weird
            // I add my own class on init
            // this also sets the empty class on the editor on init
            tinymce.DOM.addClass( editor.bodyElement, 'content-editor' );
        });

        // You CAN do it on 'change' event, but tinyMCE sets debouncing on that event
        // so for a tiny moment you would see the placeholder text and the text you you typed in the editor
        // the selectionchange event happens a lot more and with no debouncing, so in some situations
        // you might have to go back to the change event instead.
         editor.on('selectionchange', function () {
             if ( editor.getContent() === "" ) {
                 tinymce.DOM.addClass( editor.bodyElement, 'empty' );
             } else {
                 tinymce.DOM.removeClass( editor.bodyElement, 'empty' );
             }
         });
   }} 

The HTML part in the view

and Finally the CSS to create the placeholder text (it gets it from data-placeholder="Content..." but you could do it directly in css

    .content-editorr:before {
        display: none;
}
.content-editor.empty:before {
        display: block;
        position: absolute;
        content: attr(data-placeholder);
}

I found it on github:

https://github.com/angular-ui/ui-tinymce/issues/197

I tried many placeholder solutions for tinymce and found this solution very usefull as it meets all the requirement of placeholder. I think it is the best solution,