javascript - How to fix Material Design Light - SCEditor conflict? -

i'm looking fix material design light working mybb uses sceditor, js wysiwyg editor. there conflict because mdl adds layout classes break editors textbox. at github there similar issue tinymce i'm not sure how apply fix sceditor.

any appreciated, thanks.

initialising editor after layout has been upgraded seems fix issue me:

document.addeventlistener('mdl-componentupgraded', function (e) {   if (typeof e.target.materiallayout !== 'undefined') {     // create editor js here     $('textarea').sceditor({       plugins: 'bbcode',       style: 'https://cdn.jsdelivr.net/sceditor/1.5.1/jquery.sceditor.default.min.css'       /* other options options here */     });   } }); 

for mybb you'll need move js creates editor event handler it's called after mdl has upgraded layout. if can't move js, need remove , re-create editor fix it:

document.addeventlistener('mdl-componentupgraded', function (e) {   if (typeof e.target.materiallayout !== 'undefined') {     // remove previous instance first     $('textarea').sceditor('instance').destroy();      // create editor     $('textarea').sceditor({       plugins: 'bbcode',       style: 'https://cdn.jsdelivr.net/sceditor/1.5.1/jquery.sceditor.default.min.css'       /* other options options here */     });   } }); 

very ugly should work sce.

mdl conflict other js though moving mybb js inside of event handler better solution if can.