CODEWITHSUNDEEP
angularjstinymcetinymce-4
anoj
anoj

Reputation: 61

How to add the placeholder in tinymce v4.0

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>

Upvotes: 0

Views: 2562

Answers (2)

andyk
andyk

Reputation: 171

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

Upvotes: 2

anoj
anoj

Reputation: 61

This worked for me.

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

Upvotes: 0

Related Questions