如何根据light-mode类切换TinyMCE明暗模式？现有方案失效

你之前的配置逻辑本身没问题，但崩溃的原因大概率是初始化时机错误——如果TinyMCE初始化代码执行时，body元素还未加载完成，document.body会返回null，调用classList.contains会直接抛出错误，导致编辑器启动失败。

下面是两种可行的解决方案：

方案一：确保DOM加载完成后初始化编辑器 #

把TinyMCE的初始化代码放在DOM加载完成的回调里，或者直接放在页面body标签的末尾，确保能正确获取到body元素：

document.addEventListener('DOMContentLoaded', function() {
  const isLightMode = document.body.classList.contains('light-mode');
  tinymce.init({
    selector: 'textarea', // 替换成你的编辑器选择器
    skin: isLightMode ? 'oxide-light' : 'oxide-dark',
    content_css: isLightMode ? 'light' : 'dark',
    // 其他编辑器配置项...
  });
});

方案二：支持动态切换模式（可选） #

如果需要在页面运行过程中，切换body的light-mode类时同步更新编辑器的模式，可以配合MutationObserver实现动态切换：

1. 先按初始模式初始化编辑器：

const isLightMode = document.body.classList.contains('light-mode');
tinymce.init({
  selector: 'textarea',
  skin: isLightMode ? 'oxide-light' : 'oxide-dark',
  content_css: isLightMode ? 'light' : 'dark',
  // 其他配置...
});

2. 添加监听逻辑，同步更新编辑器：

const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.attributeName === 'class') {
      const isLightNow = document.body.classList.contains('light-mode');
      // 更新编辑器皮肤类名
      const editorContainer = tinymce.activeEditor.editorContainer;
      editorContainer.classList.remove('oxide-light', 'oxide-dark');
      editorContainer.classList.add(isLightNow ? 'oxide-light' : 'oxide-dark');
      // 更新内容区样式
      tinymce.activeEditor.contentCSS = isLightNow ? 'light' : 'dark';
    }
  });
});

// 监听body的class属性变化
observer.observe(document.body, { attributes: true });

注意事项 #

• 如果你使用CDN加载TinyMCE，默认已经包含oxide-light和oxide-dark皮肤；如果是本地部署，要确认皮肤文件的目录路径正确，避免加载失败。
• content_css的light和dark是TinyMCE内置的内容样式，若你有自定义内容样式，替换为对应的CSS文件路径即可。

内容的提问来源于stack exchange，提问作者Paddy Schlittler