Placeholder text for inline editors

[artboard-studio]

I thought this could be helpful to someone:

I added (hacked) 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 empty' );
            });

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

<div data-placeholder="Content..." id="post-content-editor" ui-tinymce="ContentOptions" ng-model="newPostContentModel"></div>

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 hope this could be of help to someone.

[deeg]

Thanks for posting, going to close as it is not an issue with this library.

This library is just a wrapper around Tinymce. Adding a placeholder into their inline editor should really be handled through their library. I suggest opening a feature request with them so you could remove this hack in the future.

[venu222]

Its Working like a charm...Thanks alot @human-a

[baangfilip]

I made this to a tinymce plugin and posted it here on GitHub, is that ok?

[jordanade]

The problem is it doesn't behave like a real placeholder. Text entry begins under the placeholder (doubling the height of the entry field) instead of "on top of" the placeholder.

[jordanade]

This solution works better: https://stackoverflow.com/a/34448105/3634239