Tinymce html5 placeholder by reading an attribute from textarea

Question

For standard text fields, I use this plugin to create a placeholder. How can I extend tinymce so that it works that way too.

For example, the default value is read from the textarea attribute and then cleared when the user focuses on the iframe.

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

Answer 1

I got an error if the placeholder attribute was not.

I combined the code from this answer: jQuery hasAttr checks to see if there is an element attribute to get the modified code below that is relevant to this scenario:

setup: function(ed) { // Set placeholder var tinymce_placeholder = $('#'+ed.id); var attr = tinymce_placeholder.attr('placeholder'); // For some browsers, `attr` is undefined; for others, // `attr` is false. Check for both. if (typeof attr !== 'undefined' && attr !== false) { var is_default = false; ed.onInit.add(function(ed) { // get the current content var cont = ed.getContent(); // If its empty and we have a placeholder set the value if(cont.length == 0){ ed.setContent(tinymce_placeholder.attr("placeholder")); // Get updated content cont = tinymce_placeholder.attr("placeholder"); } // convert to plain text and compare strings is_default = (cont == tinymce_placeholder.attr("placeholder")); // nothing to do if (!is_default){ return; } }); ed.onMouseDown.add(function(ed,e) { // replace the default content on focus if the same as original placeholder if (is_default){ ed.setContent(''); } }); } } 

Answer 2

I reworked Tom Duke code to work with TinyMCE4 using this jquery plugin

 $('textarea.tinymce').tinymce({ script_url: _base + '/assets/js/tinymce/tinymce.min.js', theme: "modern", setup: function(editor) { // Set placeholder var placeholder = $('#' + editor.id).attr('placeholder'); if (typeof placeholder !== 'undefined' && placeholder !== false) { var is_default = false; editor.on('init', function() { // get the current content var cont = editor.getContent(); // If its empty and we have a placeholder set the value if (cont.length === 0) { editor.setContent(placeholder); // Get updated content cont = placeholder; } // convert to plain text and compare strings is_default = (cont == placeholder); // nothing to do if (!is_default) { return; } }) .on('focus', function() { // replace the default content on focus if the same as original placeholder if (is_default) { editor.setContent(''); } }) .on('blur', function() { if (editor.getContent().length === 0) { editor.setContent(placeholder); } }); } } }); 

Answer 3

The answers above did not work for me, but here is my (for me) working code based on the answers above and using onchange_callback. Hope this helps someone!

 onchange_callback : function(ed){ var tinymce_placeholder = $('#' + ed.id).attr("placeholder"); setTimeout(function () { var content = ed.getContent().replace(/<p>|<\/p>/g, ''); if (content == '') { ed.setContent(tinymce_placeholder); } }, 200); }, setup: function (ed) { // Set placeholder var tinymce_placeholder = $('#' + ed.id); if (tinymce_placeholder.length) { ed.onInit.add(function (ed) { var cont = ed.getContent(); if (cont.length == 0) { ed.setContent(tinymce_placeholder.attr("placeholder")); } }); ed.onMouseDown.add(function (ed, e) { var content = ed.getContent().replace(/<p>|<\/p>/g, ''); if (content == tinymce_placeholder.attr("placeholder")) { ed.setContent(''); } }); } } 

Answer 4

Try this code:

Add placeholder text for the tinyMCE built-in 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' ); } }); }} 

HTML part in view

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

and finally CSS to create the placeholder text (it gets it from data-placeholder = "Content ...", but you can 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 measurement solutions for tinymce and found this solution very useful as it meets all the placeholder requirements. I think this is the best solution,

Answer 5

For tinymce 4, I had problems with events where ed.onInit was not defined. tinymce 4 uses ed.on ('event', callback) instead. Here is my implementation. I also used focus instead of mousedown as an event to listen when cleaning the editor, because mousdown did not work for any reason.

 setup : function(ed) { // Set placeholder var tinymce_placeholder = $('#'+ed.id); var attr = tinymce_placeholder.attr('placeholder'); // For some browsers, `attr` is undefined; for others, // `attr` is false. Check for both. if (typeof attr !== 'undefined' && attr !== false) { var is_default = false; ed.on('init' , function(ed) { // get the current content var cont = ed.target.getContent(); // If its empty and we have a placeholder set the value if(cont.length == 0){ ed.target.setContent(tinymce_placeholder.attr("placeholder")); // Get updated content cont = tinymce_placeholder.attr("placeholder"); } // convert to plain text and compare strings is_default = (cont == tinymce_placeholder.attr("placeholder")); // nothing to do if (!is_default){ return; } }); ed.on('focus', function(ed,e) { // replace the default content on focus if the same as original placeholder if (is_default){ ed.target.setContent(''); } }); } } 

hope this helps anyone who has had problems with other answers.

Answer 6

I found another method that never messes with the contents of a text field. I like it, so I don’t have any special conditions that prevent the user from sending content that is only placeholder. The entry here is here , but I added the onclick method so that the label is clicked - without this, the user must click either below <label> or to the side of it. This works great with TinyMCE 4.

style

 .tinyMCEPlaceholder { top: 45px; left: 9px; z-index: 1; color: #bbbbbb; position: absolute; cursor:text; } 

HTML

 <div id="holder"> <label for="tinymce" onclick="tinymce.execCommand('mceFocus',false,'area_id');">Type your article</label> <textarea id="comments" id="area_id" class="tinymce" name="comments" cols="40" rows="10"></textarea> </div> <!-- or --> <div id="holder"> <label for="tinymce" onclick="tinymce.get('area_id').fire('focus',{},false);">Type your article</label> <textarea id="comments" id="area_id" class="tinymce" name="comments" cols="40" rows="10"></textarea> </div> 

TinyMCE setup

  // setup setup : function(ed) { /* toggle all labels that have the attr 'tinymce' */ ed.on('init', function() { if(ed.getContent() != '') { $('label[for="tinymce"]').hide(); } $(ed.getDoc()).contents().find('body').focus(function(){ $('label[for="tinymce"]').hide(); }); $(ed.getDoc()).contents().find('body').blur(function(){ if(ed.getContent() == '') { $('label[for="tinymce"]').show(); } }); }); }, 

Answer 7

Example from tinymce:

 tinyMCE.init({ mode : "textareas", theme : "advanced", setup : function(ed) { var is_default = false; ed.onInit.add(function(ed) { ed.focus(); // set the focus var cont = ed.getContent(); // get the current content slen = cont.length; cont = cont.substring(3,slen-4); // cut off <p> and </p> to comply with XHTML strict // these can't be part of the default_value is_default = (cont == tiny_mce_default_value); // compare those strings if (!is_default) return; // nothing to do ed.selection.select(ed.dom.select('p')[0]); // select the first (and in this case only) paragraph }); ed.onMouseDown.add(function(ed,e) { if (!is_default) return; // nothing to do ed.selection.setContent(''); // replace the default content with nothing }); // The onload-event in IE fires before TinyMCE has created the Editors, // so it is no good solution here. } }); 

http://www.tinymce.com/wiki.php/TinyMCE_FAQ#Select_if_default_text.2C_then_delete_when_typing_starts.3F

Updated to work with the best jquery

 setup: function(ed) { // Set placeholder var tinymce_placeholder = $('#'+ed.id); if(tinymce_placeholder.length){ var is_default = false; ed.onInit.add(function(ed) { // get the current content var cont = ed.getContent(); // If its empty and we have a placeholder set the value if(cont.length == 0){ ed.setContent(tinymce_placeholder.attr("placeholder")); // Get updated content cont = tinymce_placeholder.attr("placeholder"); //cont = ed.getContent(); - too slow } // convert to plain text and compare strings is_default = (cont == tinymce_placeholder.attr("placeholder")); // nothing to do if (!is_default){ return; } }); ed.onMouseDown.add(function(ed,e) { // replace the default content on focus if the same as original placeholder if (is_default){ ed.setContent(''); } }); } 

Answer 8

This plugin for TinyMCE looks like a solution:

https://github.com/mohan/tinymce-placeholder

Hope this helps!