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

[The4thLaw]

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.

[The4thLaw]

I think I figured it out. You need to apply the layout on a div, not on the body.
I would still keep this issue open in order to clarify the documentation. From the current phrasing, it's not clear that some things may break when the layout is applied on the body.

[Garbee]

The docs include clear instructions as to how to structure markup. If you deviate, that is on you. We can't warn about everything.

[samccone]

glad you figured it out @The4thLaw :)

From the current phrasing, it's not clear that some things may break when the layout is applied on the body.

How do you think we can improve this? More than willing to improve the docs in this area (patches welcome :smile: )..

Thanks again!

[The4thLaw]

The docs include clear instructions as to how to structure markup. If you deviate, that is on you. We can't warn about everything.

Ah, I feel like my own customer :smile:

No, they don't. They include clear _samples_. In most of my projects, the body tag is just the semantic top-level div. There's nothing special about it.
MDL "fails" in my example because it tries to insert an element before the body (if I understood the source correctly). That's not wrong, but that's not immediately clear either.

I also think you can't warn about everything. But I'm not using such an uncommon setup. What's wrong about trying to remove an element from the markup because it brings no semantic value?

How do you think we can improve this? More than willing to improve the docs in this area (patches welcome :smile: ).

I'll see how this could be improved in the docs. Should I just foresee a patch for the layout/README.md files? Or is the website documentation generated from elsewhere?

PS: thanks for the quick feedback

[Garbee]

The component docs are generated from each components README file.

Although, it already states:

Required on outer div element

In the remarks for the mdl-layout and mdl-js-layout classes in the configuration options section. If that isn't clear enough, then perhaps that is the place to look at improving the context.

[The4thLaw]

I've just submitted a pull request. I thought the summary at the end, where it says

Required on outer div element

was good as it was: a concise summary. So my pull request proposes a change on the "tutorial" :)

[Brian-Ding]

I am developing an asp.net core webapplication, the same problem shows up, that the textarea is not editable. as long as i comment out js of mdl, tinymce works again

and i am not applying mdl-layout/mdl-js-layout on body, any ideas? THX!

[ThiagoT1]

Could you post some code?

I have tinyMCE and MDL doing ok together, with inline editing.

[Brian-Ding]

here is the related code

[The4thLaw]

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"
        });
    }
});

[ThiagoT1]

Please see this: http://stackoverflow.com/questions/15509484/multiple-tinymce-textareas.
Also, you can try:

1. If you´re dynamically adding the textarea to the DOM after the tinymce.init call, it won´t work right away
2. Delay - a lot - the init call (setTimeout) so you can be sure it fires after MDL has upgraded the DOM. If It works, there´s your problem.
3. Check if specific selector work, instead of mode: textareas

[Brian-Ding]

You could try the solution described in #1369 .

I will try this, thx!

Please see this: http://stackoverflow.com/questions/15509484/multiple-tinymce-textareas.
Also, you can try:

If you´re dynamically adding the textarea to the DOM after the tinymce.init call, it won´t work right away
Delay - a lot - the init call (setTimeout) so you can be sure it fires after MDL has upgraded the DOM. If It works, there´s your problem.
Check if specific selector work, instead of mode: textareas

The editor did shows up, but not able to edit

[Brian-Ding]

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"
});
}
});

adding that does solve the problem, thx!

[ArleyOliveira]

How to solve this problem by using the tinymce as a component in angularjs.

Note: I can not edit the textarea tag.

code:
HTML

 <form ng-controller="TinyMceController">
    <textarea ui-tinymce="tinymceOptions" ng-model="tinymceModel"></textarea>
  </form>

SCRIPT

var myAppModule = angular.module('myApp', ['ui.tinymce']);
myAppModule.controller('TinyMceController', function($scope) { 
    $scope.tinymceOptions = {
      plugins: 'link image code',
      toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code'
    };
});

1862

[Garbee]

@ArleyOliveira Please use StackOverflow for support and integration assistance. This tracker is for problems relating to the code provided by MDL.

Thank you.

[mh-cbon]

I know this issue has been closed, but i faced the same issue, a tinymce loaded with mdl, the textbox wont be editable.

I found previous solution highly suspicious, because i m not sure how often this handler will run and init the tinymce instance document.addEventListener('mdl-componentupgraded',

I d like to suggest instead to listen to the container element event mdl-componentupgraded

something like this, depending your code,

  <div class="mdl-textfield mdl-js-textfield
  {{if .Field.GetError}}is-invalid{{end}}
  {{if not .Field.IsPlaceHolderOnly}}mdl-textfield--floating-label{{end}}
  ">
     <textarea class="mdl-textfield__input"
     type="text"
     rows= "3"
     id="{{.Field.GetId}}">{{.Field.GetValue}}</textarea>
  </div>
  <script type="text/javascript">
    (function () {
      var container = document.getElementById("{{.Field.GetId}}").parentNode;
      container.addEventListener('mdl-componentupgraded', function(){
        tinymce.init({
          selector: '#{{.Field.GetId}}',
        });
      }, false);
    })();
  </script>

But thanks for the aforementioned solution, it put me on track!

[maniacmusic]

I have this problem with another WYSIWYG editor, SCEditor while coding a theme for MyBB.
Can someone help me with it?

[mh-cbon]

try on stackoverflow instead.

[maniacmusic]

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