高级排版

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

根据设置，高级排版（Advanced Typography）插件可以在点击高级排版按钮后，将常见的打字机风格字符替换为专业的排版等效字符。此操作将修改 TinyMCE 文档的全部内容或用户选中的特定文本。

例如，如果设置了英语排版规则，高级排版插件可以自动将短横线（-）替换为长破折号（—）。它还可以自动将水滴形撇号（'）替换为左引号和右引号（‘ 和 ’）。

高级排版插件规则

高级排版插件的规则源自 typograf 库。

然而，高级排版插件仅使用了该库中所有可用规则的一个子集。

在该库的完整 typograf 规则 列表中，高级排版插件使用以下规则：

• common/space/delBeforePunctuation

• common/space/afterComma

• common/space/afterColon

• common/space/delBetweenExclamationMarks

• common/space/afterExclamationMark

• common/space/afterQuestionMark

• common/space/afterSemicolon

• common/space/beforeBracket

• common/space/bracket

• common/space/delBeforeDot

• common/space/delBeforePercent

• common/space/squareBracket

• common/number/mathSigns

• common/number/times

• common/number/fraction

• common/symbols/arrow

• common/symbols/cf

• common/symbols/copy

• common/punctuation/delDoublePunctuation

• common/punctuation/hellip

• common/nbsp/afterSectionMark

• common/punctuation/quote

• en-US/dash/main

• common/nbsp/afterParagraphMark

• common/nbsp/afterShortWord

• common/nbsp/beforeShortLastNumber

• common/nbsp/beforeShortLastWord

• common/nbsp/dpi

• common/punctuation/apostrophe

不使用其他 typograf 规则，且高级排版插件无法配置为使用上述列表以外的任何 typograf 规则。

高级排版插件仅影响文本，不会修改底层的 HTML 标记。

交互式示例

HTML

<textarea id="advanced-typography">

<h3>使用高级排版插件</h3>

<ol>
<li>选中下方简短叙述的文本。</li>
<li>按下排版工具栏按钮以运行高级排版插件的 en-US 排版规则。</li>
<li>观察文本从以打字机为中心的排版方式转变为更利于排版的格式。</li>
</ol>

<h3>简短叙述</h3>

<p>"It's over there", she said.</p>

<p>"No. There" -- -> -- she pointed.</p>

<p>"Got it", he said.</p>

<p>He smiled as he looked down at the simple but striking image. "So, I presume the next step is to (c) this?"</p>

<p>"Nah, that happens automatically. We need a full-blown (tm). And that takes... lawyers."</p>

<p>"Oh. Well" -- he started back towards her desk -- "I guess I'd better call Sarah."</p>

<p>She -> back to the table he'd grabbed the design from. "The <code>8-bit and "gloriously proud of it"</code> version is also back there. Sarah will need that as well, and all the sample product packaging using both designs."</p>

<p>He turned back, grabbed the extra sheet, and headed back to his office. <em>[ This sentence needs work. Something about 10C hotter to reflect his excitement -- ed. ]</em></p>
</textarea>

JS

tinymce.init({
  selector: "textarea#advanced-typography",
  height: 300,
  menu: { tools: { title: 'Tools', items: 'code wordcount typography' }},
  plugins: 'code typography',
  toolbar: 'bold italic | code typography',
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }',
  typography_default_lang: 'en-US',
  typography_langs: [
    'en-US',
    'es',
    'de'
  ],
  typography_rules: [
    'common/punctuation/quote',
    'en-US/dash/main',
    'common/nbsp/afterParagraphMark',
    'common/nbsp/afterSectionMark',
    'common/nbsp/afterShortWord',
    'common/nbsp/beforeShortLastNumber',
    'common/nbsp/beforeShortLastWord',
    'common/nbsp/dpi',
    'common/punctuation/apostrophe',
    'common/space/delBeforePunctuation',
    'common/space/afterComma',
    'common/space/afterColon',
    'common/space/afterExclamationMark',
    'common/space/afterQuestionMark',
    'common/space/afterSemicolon',
    'common/space/beforeBracket',
    'common/space/bracket',
    'common/space/delBeforeDot',
    'common/space/squareBracket',
    'common/number/mathSigns',
    'common/number/times',
    'common/number/fraction',
    'common/symbols/arrow',
    'common/symbols/cf',
    'common/symbols/copy',
    'common/punctuation/delDoublePunctuation',
    'common/punctuation/hellip'
  ],
  typography_ignore: [ 'code' ]
});

基本设置

要在编辑器中添加高级排版插件，请在编辑器配置的 plugins 选项中添加 typography。

高级排版插件需要配置 typography_default_lang。

例如：

tinymce.init({
  selector: 'textarea',  // 请根据您的 HTML 修改此值
  plugins: 'typography',
  toolbar: 'typography',
  typography_default_lang: [ "en-US" ], // 必需，用于设置特定的排版语言规则。
});

有关使用模块打包器（module bundlers）打包此插件的信息，请参阅 Bundling TinyMCE - Overview。

选项

以下配置选项影响高级排版插件（Advanced Typography plugin）的行为。

typography_default_lang

此选项使用户能够在 TinyMCE 编辑器中预设默认的排版语言。通过设置 typography_default_lang，当用户首次打开 TinyMCE 编辑器时，会自动默认应用新的默认语言。如果此默认语言随后被用户更改，新的默认设置将被保存并在文档间保持不变。

通过设置 typography_default_lang，用户每次打开 TinyMCE 编辑器时，都会自动默认应用新的默认语言。

示例：使用 typography_default_langs

tinymce.init({
  selector: 'textarea',  // 请根据您的 html 修改此值
  menu: { tools: { title: '工具', items: 'code wordcount typography' }},
  plugins: 'typography',
  toolbar: 'typography',
  typography_default_lang: 'en-US', // 在此定义默认语言，例如：'en-US'
});

typography_ignore

此选项用于指示高级排版插件忽略指定 HTML 标签内的内容，或忽略具有指定属性的指定 HTML 标签内的内容。

如果某个 HTML 标签或具有指定属性的 HTML 标签被添加到 typography_ignore 数组中，则排版插件的规则将不会应用于该标签内的材料。

类型： Array

默认值： 无

可能的值： [ '<html-selector>', 'span["<html-selector>"]' ]

示例：使用 typography_ignore

tinymce.init({
  selector: 'textarea',  // 请根据您的 html 修改此值
  plugins: 'typography',
  toolbar: 'typography',
  typography_default_lang: 'en-US',
  typography_ignore: [ 'code', 'span["lang"]' ]
});

typography_langs

此选项设置可用于应用特定语言排版规则的语言。

用户可以选择文本，并从可用语言中进行选择。然后，该语言的特定语言排版规则将应用于所选文本。

类型： Object

示例：使用 typography_langs

tinymce.init({
  selector: 'textarea', // 请根据您的 html 修改此值
  plugins: 'typography',
  toolbar: 'typography language',
  typography_default_lang: 'en-US',
  typography_langs: [
    'en-US',
    'es',
    'de'
  ],
});

当前支持的语言

typography_rules

此选项指定高级排版插件可用的规则。

高级排版插件的规则源自 typograf 库。

高级排版插件支持的所有规则均记录在 Rules of typograf 中。

类型： Array

示例：使用 typography_rules

tinymce.init({
  selector: 'textarea',  // 请根据您的 html 修改此值
  plugins: 'typography',
  toolbar: 'typography',
  typography_default_lang: 'en_US', // 这是必需的，用于配置排版使用的默认语言。
  typography_rules: [
    'common/punctuation/quote',
    'en-US/dash/main',
    'common/nbsp/afterParagraphMark',
    'common/nbsp/afterSectionMark',
  ]
});

工具栏按钮

高级排版插件提供以下工具栏按钮：

可以使用以下方式将这些工具栏按钮添加到编辑器：

• toolbar 配置选项。

• quickbars_insert_toolbar 配置选项。

• 自定义上下文工具栏。

菜单项

Advanced Typography 插件提供以下菜单项：

可以使用以下方式将这些菜单项添加到编辑器：

• menu 配置选项。

• contextmenu 配置选项。

• 自定义菜单工具栏按钮。

命令

Advanced Typography 插件提供以下 TinyMCE 命令。

tinymce.activeEditor.execCommand('mceTypography');