material-design-lite: mdl-js-layout conflicts with TinyMCE

Hello,

It seems that something in mdl-js-layout conflicts with TinyMCE.

When that class is applied to the body tag, TinyMCE cannot open its menus anymore. In some other cases, you may also end up with non-editable text areas, but I have not been able to reproduce that bug on its own so I’ll check later if this one gets fixed.

Tested with MDL 1.0.5 and MDL 1.0.6.

A JSFiddle is available here: https://jsfiddle.net/2zrcf0uf/1/ . Try clicking the File, Edit, View, Format and Formats menu. It fails with Chrome 43 and Firefox 41 at least.

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 19 (5 by maintainers)

Commits related to this issue

Propose a fix for issue #1862 Clarified that the mdl-layout classes cannot be put on the body element. — committed to The4thLaw/material-design-lite by The4thLaw 9 years ago
Merge pull request #1863 from The4thLaw/issue-1862 Documentation change to fix #1862 — committed to google/material-design-lite by sgomes 9 years ago

Most upvoted comments

I did and got help. I’ll leave it here just for reference. http://stackoverflow.com/questions/40656975/how-to-fix-material-design-light-sceditor-conflict

maniacmusic on Nov 17, 2016

You could try the solution described in #1369 .

Here’s a excerpt:

document.addEventListener('mdl-componentupgraded', function(e) {
    //In case other element are upgraded before the layout  
    if (typeof e.target.MaterialLayout !== 'undefined') {
        tinymce.init({
            selector: "textarea.richtext"
        });
    }
});

The4thLaw on Mar 25, 2016