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

Question

我正在寻找一个修复程序来获得 Material Design Light与使用 SCEditor 的 MyBB 合作，一个 JS 所见即所得的编辑器。存在冲突，因为 MDL 添加了破坏编辑器文本框的布局类。 At Github there is a similar issue with TinyMCE但我不确定如何将修复应用到 SCEditor。

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

Answer 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 移动到事件处理程序内部将是更好的解决方案。