添加CSS

使用 content_css 将外部样式表加载到可编辑区域，或使用 content_style 注入内联 CSS。这两个选项仅适用于编辑器内容（经典模式中的 iframe 正文），而不适用于周围的 UI。

向编辑器添加 CSS 和样式

content_css

content_css 选项将指定的 CSS 文件加载到可编辑区域中。

类型：String，Array

此选项旨在与 TinyMCE 的经典模式配合使用，因为可编辑区域在 iframe 中进行沙箱处理。对于 内联模式编辑器，相关的 CSS 样式表应作为 TinyMCE 渲染所在网页的一部分加载，而不是使用 content_css 选项。在内联模式下应用这些针对 iframe 的样式可能会导致意外的样式泄露、布局偏移或溢出问题（例如内容溢出到其容器之外），因为编辑器样式直接与周围页面交互。

TinyMCE 附带六个内容 CSS 文件：

• default

• dark

• document

• writer

• tinymce-5

• tinymce-5-dark

可以使用 content_css 配置选项在编辑器中启用这些内容 CSS 文件。

例如：

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_css: 'writer'
});

这些内容 CSS 文件还可以作为为编辑器创建自定义内容 CSS 文件的模板。有关 CSS 文件，请参阅：tinymce-dist GitHub Repository - Content CSS files。

Tiny 还提供了带有增强皮肤的内容 CSS 文件，有关高级内容 CSS 文件列表，请参阅：Enhanced Skins & Icon Packs。

Tiny 建议对编辑器和将渲染编辑器内容的页面使用相同的 CSS。

如果指定了相对路径，将相对于 TinyMCE 渲染所在网页的 URL 进行解析。

绝对路径示例

// File: http://domain.mine/mysite/index.html

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_css: '/myLayout.css'  // resolved to http://domain.mine/myLayout.css
});

相对路径示例

// File: http://domain.mine/mysite/index.html

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_css: 'mycontent.css'  // resolved to http://domain.mine/mysite/mycontent.css
});

要加载多个样式表，请以字符串数组或逗号分隔的字符串形式提供路径。

使用多个样式表示例

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_css: 'mycontent.css,mycontent2.css'  // includes both CSS files in header
});

使用多个样式表作为数组示例

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_css: [ 'mycontent.css', 'mycontent2.css' ]  // includes both CSS files in header, ability to have CSS with `,` in URL
});

浏览器缓存

浏览器缓存可能会导致 TinyMCE 无法读取已更改的 CSS 文件的内容。您将看到“旧”颜色和样式。

一种解决方案是当 content_css 或 editor_css 的文件发生变化时，手动清除浏览器缓存。另一种解决方案是使用一种旧的 hack 方法，即向 URL 添加一个包含当前时间戳的伪参数，如“myFile.css?bogus=10023561235”。可能的解决方案如下所示：

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_css: 'path/myfile.css?' + new Date().getTime()
});

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_css: 'path/myscript.php?myParam=myValue&bogus=' + new Date().getTime()
});

要删除段落之间的边距（有时在电子邮件客户端中使用 TinyMCE 时需要），请将以下样式添加到内容 CSS 中：

/*
 Removes margins on paragraphs,
 might be useful for mail clients
*/
p { margin: 0 }

content_css_cors

此选项已被标记为已弃用。它将在即将发布的 TinyMCE 9.0 版本中完全移除。作为替代方案，我们建议使用 crossorigin。

当 content_css_cors 设置为 true 时，编辑器将在 StyleSheetLoader 加载 content_css 时使用的 link 标签中添加 crossorigin="anonymous" 属性。这允许您将 content_css 托管在与编辑器本身不同的服务器上。

类型：Boolean

默认值：false

可能的值：true，false

示例：使用 content_css_cors

// File: http://domain.mine/mysite/index.html

tinymce.init({
  selector: 'textarea',  // 根据你的 HTML 更改此值
  content_css: 'http://www.somewhere.example/mycontent.css',
  content_css_cors: true
});

content_style

此选项允许将自定义 CSS 样式设置为字符串。这些样式会被注入到包含可编辑区域的页面的 head 中。在 TinyMCE 的经典模式（classic mode）中，样式会注入到 TinyMCE 的 iframe 的 head 中。在内联模式（inline mode）中，样式会注入到 TinyMCE 渲染所在页面的 head 中。

在 经典模式中，样式的作用域限于 TinyMCE 的 iframe。在 内联模式中，content_style 会被注入到宿主页面，因此如果作用域设置不当，样式可能会影响其他元素，可能导致样式冲突、溢出风险或布局问题。

类型： String

content_style 样式不会保存在 TinyMCE 的内容中。如果需要用于显示目的，请确保这些样式也包含在将要显示内容的页面中。

示例：使用 content_style 应用一个 CSS 样式

tinymce.init({
  selector: 'textarea',  // 根据你的 HTML 更改此值
  content_style: 'div { margin: 10px; border: 5px solid red; padding: 3px; }'
});

要使用此选项添加两种或更多样式，请将样式作为单个字符串提供。

示例：使用 content_style 应用两个或更多 CSS 样式

tinymce.init({
  selector: 'textarea',  // 根据你的 HTML 更改此值
  content_style: 'div { margin: 10px; border: 5px solid red; padding: 3px; } ' +
    '.blue { color: blue; } .red { color: red; }'
});

向编辑器添加字体

font_css

font_css 选项会将指定的字体 CSS 文件加载到可编辑区域以及 TinyMCE 渲染所在的网页中。

字体 CSS 文件应仅包含用于通过 @font-face 及相关 CSS 规则指定自定义字体的 CSS。

要允许用户应用通过 font_css 添加的字体，请使用 font_family_formats 选项更新字体列表。

类型： String, Array

此选项设计用于 TinyMCE 的经典模式，因为可编辑区域在 iframe 中被沙盒隔离。对于内联模式编辑器，相关的字体 CSS 文件应作为 TinyMCE 渲染所在网页的一部分加载，而不是使用 font_css 选项。

如果指定了相对路径，将根据 TinyMCE 渲染所在网页的 URL 进行解析。

绝对路径示例

// File: http://domain.mine/mysite/index.html

tinymce.init({
  selector: 'textarea',  // 根据你的 HTML 更改此值
  font_css: '/myFont.css'  // 解析为 http://domain.mine/myFont.css
});

相对路径示例

// File: http://domain.mine/mysite/index.html

tinymce.init({
  selector: 'textarea',  // 根据你的 HTML 更改此值
  font_css: 'myFont.css'  // 解析为 http://domain.mine/mysite/myFont.css
});

要加载多个字体 CSS 文件，请将路径作为字符串数组或逗号分隔的字符串提供。

使用多个样式表的示例

tinymce.init({
  selector: 'textarea',  // 根据你的 HTML 更改此值
  font_css: 'myFont.css,myFont2.css'  // 在头部包含这两个字体 CSS 文件
});

使用多个样式表作为数组的示例

tinymce.init({
  selector: 'textarea',  // 根据你的 HTML 更改此值
  font_css: [ 'myFont.css', 'myFont2.css' ]  // 在头部包含这两个字体 CSS 文件，支持 URL 中包含 `,` 的 CSS
});

向编辑器主体添加属性

body_class

使用 body_class 选项可向每个编辑器实例的 body 添加类。此类可用于覆盖由 content_css 选项添加的样式。如果编辑器被移除，body_class 也将被移除，并且不会包含在任何从编辑器获取的内容中。

类型： String

示例：使用 body_class

这将为通过 init 调用创建的所有编辑器添加相同的类。

tinymce.init({
  selector: 'textarea',  // 根据你的 HTML 更改此值
  body_class: 'my_class'
});

这将为特定编辑器的主体设置特定的类。

tinymce.init({
  selector: 'textarea',  // 根据你的 HTML 更改此值
  body_class: 'elm1=my_class, elm2=my_class'
});

body_id

此选项允许你为每个编辑器实例的 body 指定一个 id。然后，此 id 可用于在你的 content_css 中进行 TinyMCE 特定的覆盖。

类型： String

示例：使用 body_id

这将为通过 init 调用创建的所有编辑器添加相同的 id。

tinymce.init({
  selector: 'textarea',  // 根据你的 HTML 更改此值
  body_id: 'my_id'
});

这将在特定编辑器的主体上设置特定的 id。

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  body_id: 'elm1=my_id, elm2=my_id2'
});

导入复杂的 CSS

Import CSS 插件可帮助将复杂的 CSS 导入编辑器文本区域。有关使用 Import CSS 插件的信息，请参阅：Import CSS 插件。