TinyMCE 具备全面的内容过滤功能，改变了编辑器处理内容输入和输出的方式。此功能确保内容是干净的、可维护的且可读的。

这些设置使开发人员能够控制用户可用的内容样式功能，例如字体格式、字体大小和文本缩进。还有一些关于文本复杂解析的配置选项。这些选项超出了通用配置指南的范围。请参阅内容过滤选项部分以了解更多信息。

自定义样式格式

本节介绍formats配置选项。该选项允许开发人员覆盖 TinyMCE 默认值并向编辑器添加自定义formats。

TinyMCE 配备了一个格式化引擎，允许您将一组样式和属性注册为命名的format。例如，bold格式是在单击加粗按钮时应用于文本的样式。

查看自定义格式示例以演示此选项。

样式合并

默认情况下，相似的元素和样式会被合并以减少输出 HTML 的大小。例如，TinyMCE 不会分别为字体大小分配一个span元素和为字体面分配另一个span元素，而是将这两种样式合并到一个单一的span元素中。

内置格式

TinyMCE 包含可以覆盖的内置格式。有关这些默认控件的更多信息，请参见本指南的基本设置部分。

  • alignleft

  • aligncenter

  • alignright

  • alignjustify

  • bold

  • italic

  • underline

  • strikethrough

  • forecolor

  • hilitecolor

  • fontname

  • fontsize

  • blockquote

  • removeformat

  • p

  • h1, h2, h3, h4, h5, h6

  • div

  • address

  • pre

  • div

  • code

  • dt, dd

  • samp

一些内置格式fontsize、fontname、forecolor、hilitecolor在其定义中使用名为%value的变量。该变量会被替换为用户选择的项，例如color值。有关详细信息，请查看下面的变量替换部分。

格式参数

下表中的格式参数探讨了更多高级主题。

NameSummary

inline

要生成的内联元素的名称，例如span。当前选中的文本将被包裹在此内联元素中。

block

要生成的块级元素的名称，例如h1。选中范围内的现有块级元素将被新的块级元素替换。

selector

用于在选中范围内查找元素的 CSS 3 选择器模式。选择器可用于将类应用于特定元素或复杂对象，如表格中的奇数行。

classes

空格分隔的类列表，应用于选中的元素或新的内联/块级元素。

styles

包含要应用的 CSS 样式项（如颜色和其他属性）的名称/值对象。

attributes

包含要应用于选中元素或新内联/块级元素的属性的名称/值对象。

exact

使用时禁用Style merging功能。exact对于某些 CSS 继承问题（如下划线/删除线的文本装饰）是必需的。

wrapper

状态标志，表明当前格式是块级元素的容器格式。例如div wrapper或blockquote。

remove

指定当移除格式时，元素应执行的移除行为。

block_expand

控制选中范围是否向上扩展至最接近匹配的块级元素。

deep

启用对移除匹配格式的子元素的控制。

formats 选项使用示例

此示例覆盖了部分内置格式，并指示 TinyMCE 应用类而不是内联样式。它包括一个自定义格式，该格式生成带有 title 属性和redcss样式的h1元素。

// Output elements in HTML style
tinymce.init({
  selector: 'textarea',  // change this value according to your html
  formats: {
    alignleft: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,audio,video', classes: 'left' },
    aligncenter: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,audio,video', classes: 'center' },
    alignright: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,audio,video', classes: 'right' },
    alignjustify: { selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,audio,video', classes: 'full' },
    bold: { inline: 'span', 'classes': 'bold' },
    italic: { inline: 'span', 'classes': 'italic' },
    underline: { inline: 'span', 'classes': 'underline', exact: true },
    strikethrough: { inline: 'del' },
    forecolor: { inline: 'span', classes: 'forecolor', styles: { color: '%value' } },
    hilitecolor: { inline: 'span', classes: 'hilitecolor', styles: { backgroundColor: '%value' } },
    custom_format: { block: 'h1', attributes: { title: 'Header' }, styles: { color: 'red' } }
  }
});