TinyMCE初始化完成后如何切换编辑器及内容区域的深色主题

editor.mode.set 仅用于切换编辑器的编辑/只读模式，没有修改主题配置的能力，你尝试调用的 content_css、skin 方法根本不存在于 mode.set 对象下，所以不会生效。

以下是两种可落地的正确实现方案： #

方案1：官方原生配置动态切换（适用于TinyMCE 5/6版本） #

无需额外编写自定义样式，直接调用官方API修改配置后重载编辑器即可生效：

// 切换为深色主题
editor.setOption('skin', 'dark-oxide');
editor.setOption('content_css', 'dark');
editor.reload();

// 切回浅色主题
editor.setOption('skin', 'oxide');
editor.setOption('content_css', 'default');
editor.reload();

缺点是切换时编辑器会短暂重载闪烁，适合对切换流畅度要求不高的场景。 #

方案2：无刷新平滑切换（自定义样式实现） #

如果不想重载编辑器，可以通过类名控制的方式实现秒切：

• 提前写好深浅两套主题的覆盖样式，匹配编辑器的UI结构和内容区域的样式规则
• 切换时给编辑器外层容器添加/移除深色标识类，同时通过 editor.getBody().classList.toggle('dark') 给编辑内容区域的body添加/移除深色类即可
  这种方式切换无卡顿，灵活性更高，可以自行调整深色主题的细节样式。

注意事项 #

• 确保你使用的TinyMCE版本内置了dark-oxide皮肤，官方默认完整版是自带的，如果是自定义裁剪的构建包需要确认已经打包了深色皮肤资源
• 如果你用了自定义的content_css样式文件，需要自己准备对应深色版的css文件，切换时传入对应的文件路径即可

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