John Magnolia John Magnolia - 4 years ago 782
Javascript Question

Tinymce html5 placeholder by reading attribute from textarea

For standard textareas I use this plugin to create a placeholder. How can I extend tinymce so that this works in this way also.

E.g the default value is read from the textarea attribute then cleared when a user focuses on the iframe.

Similar to this for CKEditor:

Answer Source

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 = $('#';
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){

                // 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){

        ed.onMouseDown.add(function(ed,e) {
            // replace the default content on focus if the same as original placeholder
            if (is_default){
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download