How do I add placeholder text to TinyMCE?

Question

For standard textareas, I use placeholder="" . How can I extend tinymce so that it also works in this way.

Similar to this for CKEditor: http://alfonsoml.blogspot.com.es/2012/04/placeholder-text-in-ckeditor.html

Try this tinymce plugin on github. https://github.com/mohansandesh/tinymce-placeholder — Mohan, Jan 30 '15 at 21:03

score 19 · Answer 1 · edited Jan 12 '16 at 07:50

19

The placeholder plugin worked great for me. This plugin brings HTML5 placeholder attribute functionality for the TinyMCE editor.

edited Jan 12 '16 at 07:50

naXa stands with Ukraine

35,493
19
190
259

answered May 20 '15 at 16:37

Ryan Ahearn

7,886
7
51
56

score 8 · Answer 2 · answered Oct 03 '16 at 14:00

    <html>
<head>
    <title>Bhanu Pratap, Tinymce with placeholder... </title>
    <script src="http://cdn.tinymce.com/4/tinymce.min.js"></script>
    <script type="text/javascript">
        tinymce.PluginManager.add('placeholder', function (editor) {
            editor.on('init', function () {
                var label = new Label;
                onBlur();
                tinymce.DOM.bind(label.el, 'click', onFocus);
                editor.on('focus', onFocus);
                editor.on('blur', onBlur);
                editor.on('change', onBlur);
                editor.on('setContent', onBlur);
                function onFocus() { if (!editor.settings.readonly === true) { label.hide(); } editor.execCommand('mceFocus', false); }
                function onBlur() { if (editor.getContent() == '') { label.show(); } else { label.hide(); } }
            });
            var Label = function () {
                var placeholder_text = editor.getElement().getAttribute("placeholder") || editor.settings.placeholder;
                var placeholder_attrs = editor.settings.placeholder_attrs || { style: { position: 'absolute', top: '2px', left: 0, color: '#aaaaaa', padding: '.25%', margin: '5px', width: '80%', 'font-size': '17px !important;', overflow: 'hidden', 'white-space': 'pre-wrap' } };
                var contentAreaContainer = editor.getContentAreaContainer();
                tinymce.DOM.setStyle(contentAreaContainer, 'position', 'relative');
                this.el = tinymce.DOM.add(contentAreaContainer, "label", placeholder_attrs, placeholder_text);
            }
            Label.prototype.hide = function () { tinymce.DOM.setStyle(this.el, 'display', 'none'); }
            Label.prototype.show = function () { tinymce.DOM.setStyle(this.el, 'display', ''); }
        });

        tinymce.init({selector: ".EditorControl",plugins: ["placeholder"]});

    </script>
</head>
<body>
    <textarea class="EditorControl" placeholder="Bhanu Pratap welcomes you, please enter some text here...."></textarea>
</body>
</html>

here we are adding a lable and passing it to the Bind methos of tinymce's DOM object "tinymce.DOM.bind(label.el, 'click', onFocus);"
hiding placeholder on click or if there is any text into editor.
setting colour of placeholder to #aaaaaa we can change according to the requirement.
setting padding to .25% and margin to 5px and placeholder's font-size to 17 px these settings can be changed according to requirement.
we can change Placeholder message as well and set it to in a meaningful mannar.

Thanks... :)

score 3 · Answer 3 · edited Feb 16 '18 at 20:39

3

With TinyMCE 3 and below, the plugin works fine. The plugin isn't available in TinyMCE 4, but one could add a placeholder upon init, and then remove it on focus. Remember TinyMCE uses an iframe.

tinymce.init({
  //here all the rest of the options
  //xxxxx
  //Add the placeholder
  setup: function (editor) {
    editor.on('init', function(){
      if (tinymce.get('Text').getContent() == ''){
        tinymce.get('Text').setContent("<p id='#imThePlaceholder'>Your nice text here!</p>");
      }
    });
    //and remove it on focus
    editor.on('focus',function(){
      $('iframe').contents().find('#imThePlaceholder').remove();
    });
})

edited Feb 16 '18 at 20:39

hostingutilities.com

8,894
3
41
51

answered Oct 09 '17 at 16:30

andyk

161
8

I'm not sure how I need to structure my HTML to get `tinymce.get('Text').getContent()` to work properly, or if this is an outdated way of doing things, but when I changed this to `tinyMCE.activeEditor.getContent()`, I was able to get this solution to work. Thanks for posting this andyk. – hostingutilities.com Feb 16 '18 at 20:43

score 2 · Answer 4 · edited Feb 15 '20 at 06:40

2

There is a new feature for inline placeholders in TinyMCE 5.2. An example of what could be done now to give it a custom placeholder:

<script type="text/javascript">
tinymce.init({
    selector: "textarea#classic"
});
tinymce.init({
    selector: "div#inline",
    inline: true,
    placeholder: "Type here..."
});
</script>

source: https://github.com/tinymce/tinymce/issues/4813

edited Feb 15 '20 at 06:40

Celso Wellington

875
8
19

answered Feb 15 '20 at 00:53

liebezeit

31
2
3

score 0 · Answer 5 · answered Jan 06 '23 at 18:51

Tinymce 4.9.11, I had to remove the # in the id of in andyk's response and change the word 'Text' to the name of my textarea.

tinymce.init({
  //here all the rest of the options
  //xxxxx
  //Add the placeholder
  setup: function (editor) {
    editor.on('init', function(){
      if (tinymce.get('Text').getContent() == ''){
        tinymce.get('Text').setContent("<p id='imThePlaceholder'>Your nice text here!</p>");
      }
    });
    //and remove it on focus
    editor.on('focus',function(){
      $('iframe').contents().find('#imThePlaceholder').remove();
    });
})

How do I add placeholder text to TinyMCE?

5 Answers5

Linked