Adding placholder attribute to Magento CMS page

Question

I am having trouble to add the placeholder attribute to the input elements in a CMS page of Magento. Something like this:

<input type="text" placeholder="Hello" />

I proceed to save the CMS page, however, it seems to me that Magento overrides the placeholder attribute, preventing the placeholders normally seen in HTML from being displayed.

Is there a way to achieve this?

Alan Storm Alan Storm · Accepted Answer · 2013-07-22T05:53:46

This one's a little tricky. If you check your cms_page database table, you'll find Magento is actually saving your HTML tag with a placeholder attribute. Also, if you view the page via the frontend and not the admin interface, you'll find Magento renders your placeholder attribute.

The problem is, Magento's tinymce editor is configured to strip out invalid input attributes, and this list hasn't been updated to reflect changes in HTML5.

If you're using a reasonably modern version of Magento, you can fix this by inserting the following javascript into the admin page after the tinymce javascript is loaded, but before magento runs the inline wysiwygpage_content = new tinyMceWysiwygSetup... javascript. Warning: I just threw this together, it may not work in all browsers. Buyer beware, test, etc.

if(tinyMceWysiwygSetup)
{
    tinyMceWysiwygSetup.prototype.originalGetSettings = tinyMceWysiwygSetup.prototype.getSettings;
    tinyMceWysiwygSetup.prototype.getSettings = function(mode)
    {
        var settings = this.originalGetSettings(mode);
        settings.extended_valid_elements = 'input[placeholder|accept|alt|checked|disabled|maxlength|name|readonly|size|src|type|value]';
        return settings;
    }
}

Update: I have a new module which provides an easy mechanism for adding these sorts of TinyMCE settings to Magento's editor.

Adding placholder attribute to Magento CMS page

1 Answers