如何修复 Material Design Light - SCEditor 冲突？答案

【问题标题】：How to fix Material Design Light - SCEditor conflict?如何修复 Material Design Light - SCEditor 冲突？
【发布时间】：2016-11-17 14:05:42
【问题描述】：

我正在寻找解决方案，以使 Material Design Light 与使用 SCEditor（JS WYSIWYG 编辑器）的 MyBB 一起工作。存在冲突，因为 MDL 添加了破坏编辑器文本框的布局类。 At Github there is a similar issue with TinyMCE 但我不确定如何将修复应用到 SCEditor。

非常感谢任何帮助，谢谢。

【问题讨论】：

标签： javascript material-design sceditor

【解决方案1】：

在布局升级后初始化编辑器似乎可以解决我的问题：

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 */
    });
  }
});

对于 MyBB，您需要将创建编辑器的 JS 移动到事件处理程序中，以便在 MDL 升级布局后调用它。如果无法移动 JS，则需要删除并重新创建编辑器以修复它：

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 */
    });
  }
});

非常难看，但应该适用于 SCE。

MDL 可能会与任何其他 JS 发生冲突，因此如果可以的话，将 MyBB JS 移动到事件处理程序中将是更好的解决方案。

【讨论】：

它也适用于 ckeditor，谢谢！这似乎是 WSYWYG 编辑器的常见问题。