此插件仅适用于 付费 TinyMCE 订阅。

按照长期的最佳实践，TinyMCE 文档保持 CSS 和 HTML 分离。然而，这种做法并不适合电子邮件。

Inline CSS 插件处理 TinyMCE 文档，将原本分离的 CSS 直接内联应用到每个 HTML 元素中。这种单一输出文件更符合作为 HTML 格式电子邮件发送的常见要求。

交互示例

HTML

<textarea id="inline-css" class="classic">
  <h1>TinyMCE 文档和 Inline CSS 文档</h1>

  <h2>TinyMCE 文档</h2>

  <p><em>TinyMCE</em> 文档包含</p>

  <ul>
  <li>以 HTML 标记的内容;</li>
  <li>通过 <code>content_css</code> 和 <code>font_css</code> 选项定义的样式表; 以及</li>
  <li>通过 <code>style_css</code> 选项定义的 CSS。</li>
  </ul>

  <h2>Inline CSS</h2>

  相比之下，<em>Inline CSS</em> 文档包含

  <ul>
  <li>一个单一文件，所有 CSS 样式直接内联应用到每个 HTML 元素。</li>
  </ul>

  <h2>TinyMCE Inline CSS 插件</h2>

  <p>TinyMCE Inline CSS 插件处理 TinyMCE 文档及其多个组件。</p>

  <p>并返回一个单一文件，所有 CSS 样式直接内联应用到每个 HTML 元素。</p>

  <p>例如，下面是一小段应用了各种样式的文本部分。按下<strong>Inline CSS</strong> 按钮查看所有 CSS 都被内联的内容。</p>
  <br>
  <p class="red">红色文本</p>
  <p class="red blue-background">红色文本 - 蓝色背景</p>
  <p class="blue">蓝色文本</p>
  <p class="blue red-background">蓝色文本 - 红色背景</p>

</textarea>

<div id="inlinecss-api-runner">
  <h1> 点击按钮以导出内容并将 CSS 内联</h1>
  <button id="inline-css-btn" style="margin: 10px">Inline CSS</button>
  <br/>
  <br/>

  <h2>原始 HTML 输出</h2>
  <textarea style="display: block; min-height: 250px; width: 100%;" id='output-text-area'></textarea>
  <br/>
  <br/>

  <h2>渲染输出 </h2>
  <div style="height: 400px; display: flex; flex-direction: column; overflow: hidden;">
    <iframe style="flex: 1; height: 100%; width: 100%" id="outputIframe"></iframe>
  </div>
</div>

JS

const settings = {
  plugins: [
    'advlist', 'anchor', 'autolink', 'charmap', 'code', 'fullscreen',
    'help', 'image', 'insertdatetime', 'link', 'lists', 'media',
    'preview', 'searchreplace', 'table', 'visualblocks', 'inlinecss'
  ],
  toolbar: 'undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
  content_style: `
    .red {
      color: red;
    }
    .blue {
      color: blue;
    }
    .blue-background {
      background-color: blue;
    }
    .red-background {
      background-color: red;
    }
  `
};

tinymce.init({
  selector: 'textarea.classic',
  ...settings
});

const button = document.getElementById('inline-css-btn');
const outputTextArea = document.getElementById('output-text-area');

button.addEventListener('click', () => {
  const pluginAPI = tinymce.get(0).plugins.inlinecss;
  const outputIframe = document.getElementById('outputIframe');
  const rawDoc = outputIframe.contentWindow.document;
  pluginAPI.getContent().then((content) => {
    outputTextArea.value = content.html;

    if (rawDoc) {
      rawDoc.open();
      rawDoc.write(content.html);
      rawDoc.close();
    }
  });
});

基本设置

要在编辑器中添加 Inline CSS 插件，请在编辑器配置的 plugins 选项中添加 inlinecss。

例如：

tinymce.init({
  selector: 'textarea',  // 根据您的 HTML 更改此值
  plugins: 'inlinecss',
});

有关使用模块打包器打包此插件的信息，请参阅 打包 TinyMCE - 概述。

使用说明

Inline CSS 插件不支持

  1. 伪类。

    例如：

    button:hover {
  color: blue;
}

  2. 伪元素。

    例如：

    p::first-line {
  color: blue;
}

  3. @ 规则。

    例如：

    @media (screen)

  4. !important 属性。

Classic 或 iframe 模式支持

Classic 或 iframe 模式 是一个沙盒。因此，指定 CSS 受到限制。

在 Classic 模式下，可以通过以下方式指定 CSS：

  1. content_css 选项

    设置 content_css 选项会自动创建 <link> 标签并将其放入 TinyMCE 文档的 <head> 中。

    这是在 Classic 模式下将样式表添加到 TinyMCE 的唯一受支持方式。

  2. content_style 选项

    设置 content_style 选项会自动创建 <style> 标签，并将其放入 TinyMCE 文档的 <head> 中。

    这是 Classic 模式下向 TinyMCE 添加 <style> 标签的唯一受支持方式。

  3. 在 iframe 的 <head> 中使用 <link> 标签指定 CSS 样式表。

    例如：

    <link rel="stylesheet" href="styles.css">

  4. 在 iframe 的 <head> 中使用 <style> 标签。

    例如：

    <style>p { color: red; }</style>

  5. 将 style 属性应用于文档中的特定元素。即内联 CSS。

默认情况下，TinyMCE 不支持文档 <body> 中的 <style> 标签。

Inline 模式支持

Inline 模式 不是沙盒环境。因此，任何指定的 CSS 都会影响编辑器内容的呈现方式。

在 Inline 模式下，可以通过以下方式指定 CSS：

  1. content_css 选项

    设置 content_css 选项会自动创建 <link> 标签，并将其放入 TinyMCE 文档的 <head> 中。

    不推荐使用此方法。

  2. 在文档的 <head> 中使用 <link> 标签指定 CSS 样式表。

    例如：

    <head><link rel="stylesheet" href="styles.css"></head>

  3. 在文档的 <body> 中指定 CSS 样式表。

    例如：

    <body><link rel="stylesheet" href="styles.css"></body>
    不推荐此方法。不过，某些浏览器允许这样做，因此 TinyMCE 在呈现时也会支持这种方式。

  4. 在文档的 <head> 中使用 <style> 标签。

    例如：

    <style>p { color: red; }</style>

  5. 也可以在文档的 <head> 中手动插入 <style> 标签。

  6. 将 style 属性应用于文档中的特定元素。即内联 CSS。

默认情况下，TinyMCE 不支持文档 <body> 中的 <style> 标签。

Shadow DOM 支持

在 Shadow DOM 中运行 TinyMCE 实例不受支持。

虽然既不支持在 Shadow DOM 中运行 TinyMCE，也不支持在 Shadow DOM 中运行 Inline CSS 插件，但当 TinyMCE 实例位于 shadow root 中时，Inline CSS 可能仍能正常呈现

  • 通过 content_css 选项指定的 CSS；以及

  • 通过 content_style 选项指定的 CSS

无论在 Classic 模式还是 Inline 模式下运行，其表现都符合预期。

选项

以下配置选项会影响 Inline CSS 插件的行为。

inlinecss_selector_filter

确定给定的 CSS 选择器是否允许将其 CSS 属性内联到 HTML 内容中。

默认值：所有选择器都被视为允许内联其 CSS。

类型：String、RegExp 或 Function

inlinecss_selector_filter: (selector: string): boolean => {
  return selector.indexOf('myprefix') !== -1;
}

inlinecss_file_filter

确定给定的 CSS 样式表是否允许检查并将其 CSS 内联到 HTML 内容中。

默认值：所有 CSS 样式表都被视为允许检查和内联其 CSS。

类型：String、RegExp 或 Function

inlinecss_file_filter: (href: string): boolean => {
  return selector.indexOf('mystyles') !== -1;
}

事件

Inline CSS 插件提供以下事件。

Inline CSS 插件提供以下事件。

名称数据描述

InlineCSS

不适用

当开始内联 CSS 时触发。

API

Inline CSS 插件提供以下 API。

新增了一个 API editor.plugins.inlinecss.getContent();，用于支持新的 InlineCSS 插件。

该 API 的功能是接收一个 TinyMCE 文档，并对其进行处理，使原本分离的 CSS 以内联方式应用到每个 HTML 元素上。editor.plugins.inlinecss.getContent(); API 不需要用户配置。

该 API 将执行以下操作

  • 触发“InlineCSS”事件

  • 通过调用 editor.plugins.inlinecss.getContent(); 获取编辑器内容。

  • 收集 content_css 选项定义的所有样式表

  • 收集 content_style 选项中指定的所有样式

  • 合并 content_css 和 content_style 样式，同时确保 content_style 具有更高的优先级

  • 遍历TinyMCE编辑器视口内的内容，当找到选择器匹配时，内联任何 InlineCSS 样式

  • 返回一个对象，该对象包含带有 InlineCSS 的内容，形式为 string

    • 示例

    interface PluginAPI {
  getContent: () => Promise<{
    html: string;
  }>
}

    应用 InlineCSS 内容后通过API输出的结果

    {
  html: '<p style="color: red;">hello</p>'
}