How to fix Material Design Light - SCEditor conflict?

Question

I'm looking for a fix to get Material Design Light working with MyBB which uses SCEditor , a JS WYSIWYG editor. There is a conflict because MDL adds layout classes that break the editors textbox. At Github there is a similar issue with TinyMCE but I'm not sure how to apply the fix to SCEditor.

Any help is greatly appreciated, thanks.

Answer 1

Initialising the editor after the layout has been upgraded seems to fix the issue for 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'
      /* any other options options here */
    });
  }
});

For MyBB you you'll need to move the JS that creates the editor into the event handler so it's called after MDL has upgraded the layout. If you can't move the JS, you will need to remove and re-create it the editor to fix it:

document.addEventListener('mdl-componentupgraded', function (e) {
  if (typeof e.target.MaterialLayout !== 'undefined') {
    // Remove any previous instance first
    $('textarea').sceditor('instance').destroy();

    // Create the editor
    $('textarea').sceditor({
      plugins: 'bbcode',
      style: 'https://cdn.jsdelivr.net/sceditor/1.5.1/jquery.sceditor.default.min.css'
      /* any other options options here */
    });
  }
});

Very ugly but should work for SCE.

MDL will probably conflict with any other JS though so moving the MyBB JS inside of the event handler would be the better solution if you can.