Tinymce html5 placeholder by reading attribute from textarea
I refactored Tom Duke's code to work on TinyMCE4 with it's 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);
}
});
}
}
});
I was getting an error if there was no placeholder attribute.
I combined the code from this answer: jQuery hasAttr checking to see if there is an attribute on an element to get the amended code below which deals with that 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('');
}
});
}
}
The answers above were not working for me, but here's my (for me) working code based on the answers above and using onchange_callback. Hope it 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('');
}
});
}
}