用户格式

block_formats

此选项定义要在 blocks 下拉工具栏按钮和 blocks 菜单项中显示的格式。字符串中的每个项都应使用分号分隔，并以 标题=块标签 的形式指定。

类型：String

默认值：'段落=p; 标题1=h1; 标题2=h2; 标题3=h3; 标题4=h4; 标题5=h5; 标题6=h6; 预格式化=pre'

示例：使用 block_formats

tinymce.init({
  selector: 'textarea',  // 根据您的HTML更改此值
  block_formats: 'Paragraph=p; Header 1=h1; Header 2=h2; Header 3=h3'
});

default_font_stack

此选项用于更改在 fontfamily 工具栏和菜单项中被视为“系统字体”的默认字体栈。它应该是一个字体系列名称数组，这些名称需要与所配置的 content_css CSS 文件中的默认字体相匹配。

类型：Array

默认值：[ '-apple-system', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'sans-serif' ]

示例：使用 default_font_stack

tinymce.init({
  selector: 'textarea',  // 根据您的HTML更改此值
  toolbar: 'fontsize',
  default_font_stack: [ '-apple-system', 'Arial' ]
});

font_family_formats

此选项定义要在 fontfamily 下拉工具栏按钮和 fontfamily 菜单项中显示的字体。字符串中的每个项都应使用分号分隔，并以 标题=字体系列 的形式指定。

类型：String

默认值：

'Andale Mono=andale mono,times; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Book Antiqua=book antiqua,palatino; Comic Sans MS=comic sans ms,sans-serif; Courier New=courier new,courier; Georgia=georgia,palatino; Helvetica=helvetica; Impact=impact,chicago; Symbol=symbol; Tahoma=tahoma,arial,helvetica,sans-serif; Terminal=terminal,monaco; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva; Webdings=webdings; Wingdings=wingdings,zapf dingbats'

示例：使用 font_family_formats

tinymce.init({
  selector: 'textarea',  // 根据您的HTML更改此值
  toolbar: 'fontfamily',
  font_family_formats: 'Arial=arial,helvetica,sans-serif; Courier New=courier new,courier,monospace; AkrutiKndPadmini=Akpdmi-n'
});

font_size_formats

此选项允许您自定义 fontsize 下拉工具栏按钮和 fontsize 菜单项中显示的字体大小。字符串中的每个项都应使用空格或逗号分隔，并包含单位。

类型：String

默认值：'8pt 10pt 12pt 14pt 18pt 24pt 36pt'

示例：使用 font_size_formats

tinymce.init({
  selector: 'textarea',  // 根据您的HTML更改此值
  toolbar: 'fontsize',
  font_size_formats: '8pt 10pt 12pt 14pt 16pt 18pt 24pt 36pt 48pt'
});

font_size_input_default_unit

此选项设置在 fontsizeinput 工具栏按钮的文本输入字段中输入的字号默认度量单位。

在 fontsizeinput 工具栏中输入的未指定度量单位的数字将使用所设置的度量单位进行计算。

类型：String

默认值：pt

可能的值：pt、px、em、cm、mm

如果 font_size_input_default_unit 设置为无效值（即，除上述可能的值之外的任何字符串），则该设置将被忽略。在这种情况下，在 fontsizeinput 工具栏中输入的未指定度量单位的数字也将被忽略。

示例：使用 font_size_input_default_unit

tinymce.init({
    selector: "textarea",  // 根据您的HTML更改此值
    toolbar: "fontsizeinput",
    font_size_input_default_unit: "pt"
});

line_height_formats

此选项允许您自定义 lineheight 下拉工具栏按钮和 lineheight 菜单项中显示的行高。字符串中的每个项都应使用空格分隔。

类型：String

默认值：'1 1.1 1.2 1.3 1.4 1.5 2'

示例：使用 line_height_formats

tinymce.init({
  selector: 'textarea', // 根据您的HTML更改此值
  toolbar: 'lineheight',
  line_height_formats: '1 1.2 1.4 1.6 2'
});

indentation

此选项允许指定 UI 中缩进/减少缩进按钮的缩进级别。

indentation 选项的默认值为 30px，但可以设置为任何值。

类型：String

默认值：'40px'

示例：使用 indentation

tinymce.init({
  selector: 'textarea',  // 根据HTML修改此值
  indentation: '20pt'
});

indent_use_margin

如果此选项为true，编辑器在缩进内容时将使用margin而非padding。

类型： Boolean

默认值： false

可选值： true, false

示例：使用 indent_use_margin

tinymce.init({
  selector: 'textarea',  // 根据HTML修改此值
  indentation: '20pt',
  indent_use_margin: true
});

preview_styles

此选项用于配置格式/样式列表框中的样式预览。输入以空格分隔的样式字符串，或设置为false禁用所有样式预览。

若未设置，编辑器将预览下方默认值中列出的样式。

类型： Boolean 或 String

默认值： 'font-family font-size font-weight font-style text-decoration text-transform color background-color border border-radius outline text-shadow'

可选值： String, false

示例：使用 preview_styles

无样式预览：

tinymce.init({
  selector: 'textarea',  // 根据HTML修改此值
  mode: 'textareas',
  preview_styles: false
});

仅预览font-size和color：

tinymce.init({
  selector: 'textarea',  // 根据HTML修改此值
  mode: 'textareas',
  preview_styles: 'font-size color'
});

style_formats

此选项允许您为styles下拉工具栏按钮和styles菜单项定义自定义项。

数组可包含四种类型的项：

• 样式：该项必须包含title和用于指定新格式的必要字段。可为样式提供可选name，该名称将添加custom-前缀以避免覆盖编辑器默认格式。若提供唯一name，该样式可通过格式化API使用。此项将在UI中渲染为可点击项，应用指定格式。

• 样式引用：该项必须包含title和引用预注册编辑器格式的format。此项将在UI中渲染为可点击项，应用指定格式。

• 嵌套菜单：该项必须包含title和items数组，其中包含将渲染为子菜单的其他项。

• 分组标题：该项仅需包含title，将作为菜单中不可点击的标题渲染。适用于在不使用嵌套菜单的情况下对项进行分组。

如需将自定义样式与默认styles_format值合并，请将style_formats_merge设置为true。

类型： Array

默认值：以下是style_formats使用现有格式引用的默认值：

style_formats: [
  { title: 'Headings', items: [
    { title: 'Heading 1', format: 'h1' },
    { title: 'Heading 2', format: 'h2' },
    { title: 'Heading 3', format: 'h3' },
    { title: 'Heading 4', format: 'h4' },
    { title: 'Heading 5', format: 'h5' },
    { title: 'Heading 6', format: 'h6' }
  ]},
  { title: 'Inline', items: [
    { title: 'Bold', format: 'bold' },
    { title: 'Italic', format: 'italic' },
    { title: 'Underline', format: 'underline' },
    { title: 'Strikethrough', format: 'strikethrough' },
    { title: 'Superscript', format: 'superscript' },
    { title: 'Subscript', format: 'subscript' },
    { title: 'Code', format: 'code' }
  ]},
  { title: 'Blocks', items: [
    { title: 'Paragraph', format: 'p' },
    { title: 'Blockquote', format: 'blockquote' },
    { title: 'Div', format: 'div' },
    { title: 'Pre', format: 'pre' }
  ]},
  { title: 'Align', items: [
    { title: 'Left', format: 'alignleft' },
    { title: 'Center', format: 'aligncenter' },
    { title: 'Right', format: 'alignright' },
    { title: 'Justify', format: 'alignjustify' }
  ]}
]

示例：使用 style_formats

此示例展示如何追加3种新样式格式。

tinymce.init({
  selector: 'textarea',  // 根据HTML修改此值
  style_formats: [
    { title: 'Bold text', inline: 'b' },
    { title: 'Red text', inline: 'span', styles: { color: '#ff0000' } },
    { name: 'my-inline', title: 'My inline', inline: 'span', classes: [ 'my-inline' ] }
  ],
  // 以下选项用于追加样式格式而非覆盖默认样式格式。
  style_formats_merge: true
});

交互式示例

此示例展示如何：

• 覆盖内置格式。

• 使用style_formats配置选项为styles下拉工具栏按钮和styles菜单项添加自定义样式。

HTML

<textarea id="format-custom">
  <p><img style="display: block; margin-left: auto; margin-right: auto;" title="微型Logo" src="https://www.tiny.cloud/docs/tinymce/latest/_images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128"></p>

  <h2>欢迎使用 TinyMCE 编辑器演示！</h2>
  <p>
    请尝试此自定义格式示例中提供的功能。
  </p>

  <h2>有疑问或需要帮助？</h2>
  <ul>
    <li>我们的 <a href="https://www.tiny.cloud/docs/tinymce/8/">文档</a> 是学习如何配置 TinyMCE 的绝佳资源。</li>
    <li>有具体问题？请尝试在 Stack Overflow 上使用 <a href="https://stackoverflow.com/questions/tagged/tinymce" target="_blank" rel="noopener"><code>tinymce</code> 标签</a>。</li>
    <li>我们还提供企业级支持，作为 <a href="https://www.tiny.cloud/pricing">TinyMCE 高级套餐</a> 的一部分。</li>
  </ul>

  <h2>一个简单的表格供您练习</h2>
  <table style="border-collapse: collapse; width: 100%;" border="1">
    <thead>
      <tr>
        <th>产品</th>
        <th>成本</th>
        <th>真的吗？</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="text-align: center;">TinyMCE</td>
        <td style="text-align: center;">免费</td>
        <td style="text-align: center;">是的！</td>
      </tr>
    </tbody>
  </table>

  <h2>发现错误？</h2>
  <p>
    如果您认为发现了错误，请在 <a href="https://github.com/tinymce/tinymce/issues">GitHub 仓库</a> 上创建一个问题，向开发人员报告。
  </p>

  <h2>最后……</h2>
  <p>
    您的应用需要文件上传功能？考虑使用 <a href="https://www.tiny.cloud/docs/tinymce/latest/uploadcare/" target="_blank" rel="noopener noreferrer">Uploadcare</a> 与 TinyMCE 配合，获得快速、现代的上传体验。
  </p>
  <p>
    感谢您支持 TinyMCE！我们希望它能帮助您和您的用户创建优质内容。<br>来自 TinyMCE 团队的良好祝愿。
  </p>
</textarea>

JS

tinymce.init({
  selector: 'textarea#format-custom',
  height: 500,
  plugins: 'table wordcount',
  content_style: '.left { text-align: left; } ' +
    'img.left, audio.left, video.left { float: left; } ' +
    'table.left { margin-left: 0px; margin-right: auto; } ' +
    '.right { text-align: right; } ' +
    'img.right, audio.right, video.right { float: right; } ' +
    'table.right { margin-left: auto; margin-right: 0px; } ' +
    '.center { text-align: center; } ' +
    'img.center, audio.center, video.center { display: block; margin: 0 auto; } ' +
    'table.center { margin: 0 auto; } ' +
    '.full { text-align: justify; } ' +
    'img.full, audio.full, video.full { display: block; margin: 0 auto; } ' +
    'table.full { margin: 0 auto; } ' +
    '.bold { font-weight: bold; } ' +
    '.italic { font-style: italic; } ' +
    '.underline { text-decoration: underline; } ' +
    '.example1 {} ' +
    'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }' +
    '.tablerow1 { background-color: #D3D3D3; }',
  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' },
    alignfull: { 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' },
    customformat: { inline: 'span', styles: { color: '#00ff00', fontSize: '20px' }, attributes: { title: 'My custom format'} , classes: 'example1'}
  },
  style_formats: [
    { title: '自定义格式', format: 'customformat' },
    { title: '左对齐', format: 'alignleft' },
    { title: '居中对齐', format: 'aligncenter' },
    { title: '右对齐', format: 'alignright' },
    { title: '两端对齐', format: 'alignfull' },
    { title: '粗体文本', inline: 'strong' },
    { title: '红色文本', inline: 'span', styles: { color: '#ff0000' } },
    { title: '红色标题', block: 'h1', styles: { color: '#ff0000' } },
    { title: '徽章', inline: 'span', styles: { display: 'inline-block', border: '1px solid #2276d2', 'border-radius': '5px', padding: '2px 5px', margin: '0 2px', color: '#2276d2' } },
    { title: '表格行 1', selector: 'tr', classes: 'tablerow1' },
    { title: '图像格式' },
    { title: '图像左对齐', selector: 'img', styles: { 'float': 'left', 'margin': '0 10px 0 10px' } },
    { title: '图像右对齐', selector: 'img', styles: { 'float': 'right', 'margin': '0 0 10px 10px' } },
  ]
});

此示例展示了如何编辑 HTML5 内容，如 section 和 article。