How to add the placeholder in tinymce v4.0

Question

Hi is there a way to add a placeholder for tinymce v4.0 ? I need html 5 placeholder implementation in tinymce but it is not there by default.

 <textarea id="Text" placeholder="Create your prompt here." ui-tinymce="$ctrl.tinymceOptions" ng-model="$ctrl.tmcModel"></textarea>

https://stackoverflow.com/questions/27237876/how-do-i-add-placeholder-text-to-tinymce maybe? — tanmay, Jun 01 '17 at 06:15

score 2 · Answer 1 · answered Oct 09 '17 at 01:56

Assuming one is using tinyMCE 4, you could add a placeholder upon init, and then remove it on focus. Remember TinyMCE uses an iframe. Needs to be polished for being more efficient, but here is a quick approach:

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

score 0 · Accepted Answer · answered Jun 19 '17 at 06:14

0

This worked for me.

 var iframe = document.getElementsByTagName('iframe')[0];
     iframe.style.resize = 'vertical';

answered Jun 19 '17 at 06:14

anoj

51
9

How to add the placeholder in tinymce v4.0

2 Answers2