如何在页面展示TinyMCE内容并保留编辑器原有样式？

方案1：样式优先级覆盖（实现成本最低） #

• 给渲染TinyMCE内容的外层容器绑定唯一专属类名，比如 tinymce-content
• 将TinyMCE官方content.css的所有样式规则，全部嵌套在.tinymce-content选择器下，和全局样式冲突的属性加上!important标记，提升规则优先级
• SCSS环境下可以直接嵌套编写，示例：

// 放在全局样式文件的最末尾，保证加载顺序晚于全局重置样式
.tinymce-content {
  // 下方粘贴TinyMCE content.css完整样式，SCSS会自动为所有子规则加上父类前缀
  a {
    color: #2563eb !important;
    text-decoration: underline !important;
  }
  ul, ol {
    padding-left: 2em !important;
    margin: 1em 0 !important;
  }
  li {
    list-style: inherit !important;
    margin: 0.5em 0 !important;
  }
  p {
    margin: 1em 0 !important;
  }
  // 其余TinyMCE默认样式规则
}

• 同等选择器优先级下，后加载的样式会覆盖先加载的样式，放在全局文件末尾可以进一步避免冲突。

方案2：all属性全局样式重置（无需修改原有样式规则） #

• 利用CSS的all属性直接撤销全局样式对容器及其子元素的所有影响，再引入TinyMCE的默认样式即可，不需要加!important：

.tinymce-content {
  all: revert; // 撤销所有父级、全局样式对该节点的修改
  // 直接导入TinyMCE的content.css即可生效
  @import "path/to/your/tinymce/content.css";
}

• 该属性兼容性覆盖95%以上主流浏览器，不需要调整原有全局样式或TinyMCE样式，代码量最小。

方案3：Shadow DOM原生隔离（完全样式隔离，性能优于iframe） #

如果前两种方案仍有未覆盖的冲突，可以使用浏览器原生Shadow DOM实现完全的样式隔离，开销远低于iframe：

• 封装专用的TinyMCE内容渲染React组件，示例代码：

import { useRef, useEffect } from 'react';

const TinyMceContent = ({ html }) => {
  const containerRef = useRef(null);

  useEffect(() => {
    if (!containerRef.current) return;
    // 创建Shadow根节点，内部样式和外部完全隔离
    const shadowRoot = containerRef.current.attachShadow({ mode: 'open' });
    // 插入TinyMCE默认样式
    const style = document.createElement('style');
    style.textContent = `
      /* 粘贴TinyMCE content.css完整样式内容 */
    `;
    shadowRoot.appendChild(style);
    // 插入渲染内容
    const wrapper = document.createElement('div');
    wrapper.innerHTML = html;
    shadowRoot.appendChild(wrapper);
  }, [html]);

  return <div ref={containerRef} />;
};

export default TinyMceContent;

• Shadow DOM不存在iframe的高度自适应、跨域、路由跳转异常等常见问题，性能更优。

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