Tinymce调用getContent无法保留全部CSS样式，该如何修改配置？

问题根因 #

你遇到的显示差异本质源于两个核心问题：

• getContent()默认仅返回编辑器内部的内容片段，不会包含编辑器外层容器的样式、编辑器加载的内容样式表
• 你配置的全局字体、行高默认写在#GSNotes容器上，不属于内容本身的样式，导出后没有对应规则生效，inline/iframe模式返回结果一致、修改skin不生效都是正常现象，skin仅控制编辑器UI样式，和内容渲染无关。

具体解决方案 #

1. 补充编辑器全局内容样式

在你的tinymce.init配置中新增content_style项，把原本写在#GSNotes容器上的全局样式配置为编辑器内容的默认样式，保证手动未修改的默认内容也能统一样式：

tinymce.init({
  // 保留你原来的所有配置，新增以下项
  content_style: `
    body {
      font-family: Avenir Next; 
      font-size: 0.9rem; 
      line-height: 1.2rem; 
      color: #1D273D;
      margin: 0;
      padding: 1rem;
    }
  `
})

2. 导出时生成完整HTML结构

不要直接用getContent()的结果作为完整文件内容，需要自行拼接完整的HTML头部，引入内容样式、配置全局规则，保证导出文件可独立运行，修改你的saveTEXT函数如下：

const saveTEXT = function() {
  const textPlain = tinymce.get('GSNotes').getContent({ format: 'text' });
  const contentHTML = tinyMCE.get('GSNotes').getContent();
  // 拼接完整可独立运行的HTML结构
  const fullHTML = `<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <!-- 引入编辑器使用的内容样式，也可以直接把content.min.css的内容内嵌到style标签避免外部依赖 -->
  <link rel='stylesheet' href='https://website/TINY/GSNotes-skin/skins/content/GSNotes-skin/content.min.css'>
  <style>
    /* 根字体大小和你原页面保持一致，保证rem单位渲染正确 */
    html { font-size: 16px; }
    body {
      font-family: Avenir Next; 
      font-size: 0.9rem; 
      line-height: 1.2rem; 
      color: #1D273D;
      margin: 0;
      padding: 1rem;
      min-height: 550px;
    }
  </style>
</head>
<body>
${contentHTML}
</body>
</html>`;
  const jsonARR = { textPlain, textHTML: fullHTML};
  FileMaker.PerformScriptWithOption ( 'RTE-exit' , JSON.stringify(jsonARR) , '5' );
}

3. 特殊字体适配（可选）

如果你使用的Avenir Next属于非系统默认字体，需要把字体文件转成base64内嵌到导出HTML的style标签中，避免用户设备未安装对应字体导致 fallback 到系统默认字体。

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