如何在TinyMCE编辑器外保留内容的打印样式？

• 确认TinyMCE的打印媒体查询规则
  TinyMCE默认样式中确实包含专属的@media print规则，这些规则是编辑器内Ctrl+P时样式正常的关键。你之前引入的skin.min.css和content.min.css里可能包含这些规则，但要确保打印页面的DOM结构能触发这些规则生效，比如容器层级、类名的完整性。

• 还原编辑器打印时的DOM上下文
  不要仅提取纯内容，要模拟编辑器内部的打印DOM结构：给内容容器加上mce-content-body类的同时，还要保留类似mce-edit-area的父容器层级；部分版本的TinyMCE会单独提供print.min.css，可以尝试引入这个文件，直接复用官方的打印样式逻辑。

• 用Puppeteer精准控制打印范围
  如果直接打印整个页面会带出工具栏，可通过Puppeteer的DOM操作先隐藏无关元素，再指定打印内容：

// 隐藏工具栏、菜单栏等非内容元素
await page.$eval('.mce-toolbar, .mce-menubar, .mce-statusbar', el => el.style.display = 'none');
// 生成PDF时开启背景打印，确保样式完整
await page.pdf({
  path: 'output.pdf',
  printBackground: true,
  format: 'A4'
});

• 手动补充缺失的打印样式
  如果仍有样式差异，可直接提取编辑器内的打印样式规则，添加到打印页面的样式中：

@media print {
  .mce-content-body {
    font-family: "Segoe UI", Arial, sans-serif;
    line-height: 1.5;
    color: #212529;
    padding: 1rem;
  }
  /* 强制隐藏所有非内容区域 */
  *:not(.mce-content-body):not(.mce-content-body *) {
    display: none !important;
  }
}

• 检查样式加载顺序
  确保TinyMCE的官方样式文件在自定义样式之前加载，避免自定义样式覆盖了官方的打印规则；同时排查是否有全局样式干扰了内容区域的排版。

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