格式刷

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

Format Painter 插件允许用户将格式从一个位置复制并粘贴到另一个位置，例如字体样式和大小。格式刷能够处理多种格式，包括内联和块级格式以及诸如表格样式等样式。

交互示例

格式刷在应用后会保留格式，因此可以通过使用 Ctrl+Alt+V 键盘快捷键多次应用相同的格式。

HTML

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

  <h2 style="text-align: center;">Welcome to the TinyMCE editor demo!</h2>

  <h2>Got questions or need help?</h2>

  <ul>
    <li>Our <a href="https://www.tiny.cloud/docs/tinymce/8/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
    <li>Have a specific question? Try the <a href="https://stackoverflow.com/questions/tagged/tinymce" target="_blank" rel="noopener"><code>tinymce</code> tag at Stack Overflow</a>.</li>
    <li>We also offer enterprise grade support as part of <a href="https://www.tiny.cloud/pricing">TinyMCE premium plans</a>.</li>
  </ul>

  <h2>A simple table to play with</h2>

  <table style="border-collapse: collapse; width: 100%;" border="1">
    <thead>
      <tr>
        <th>Product</th>
        <th>Cost</th>
        <th>Really?</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="text-align: center;">TinyMCE</td>
        <td style="text-align: center;">Free</td>
        <td style="text-align: center;">YES!</td>
      </tr>
    </tbody>
  </table>

  <h2>Found a bug?</h2>

  <p>
    If you think you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.
  </p>

  <h2>Finally ...</h2>

  <p>
    Need file uploads in your app? Consider using <a href="https://www.tiny.cloud/docs/tinymce/latest/uploadcare/" target="_blank" rel="noopener noreferrer">Uploadcare</a> with TinyMCE for a fast, modern upload experience.
  </p>
  <p>
    Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br>All the best from the TinyMCE team.
  </p>
</textarea>

JS

tinymce.init({
  selector: 'textarea#format-painter',
  plugins: 'formatpainter code',
  toolbar: 'formatpainter code',
  formats: {
    borderstyle: { selector: 'td,th', styles: { borderTopStyle: 'solid', borderRightStyle: 'solid', borderBottomStyle: 'solid', borderLeftStyle: 'solid', }, remove_similar: true },
    bordercolor: { selector: 'td,th', styles: { borderTopColor: '#32CD32', borderRightColor: '#32CD32', borderBottomColor: '#32CD32', borderLeftColor: '#32CD32' }, remove_similar: true },
    backgroundcolor: { selector: 'td,th', styles: { backgroundColor: '#006400' }, remove_similar: true },
    formatpainter_removeformat: [
      { selector: 'b,strong,em,i,font,u,strike,sub,sup,dfn,code,samp,kbd,var,cite,mark,q,del,ins',
        remove: 'all',
        split: true,
        expand: false,
        block_expand: true,
        deep: true
      },
      { selector: 'span',
        attributes: ['style', 'class'],
        remove: 'empty',
        split: true,
        expand: false,
        deep: true
      },
      { selector: '*:not(tr,td,th,table)',
        attributes: ['style', 'class'],
        split: false,
        expand: false,
        deep: true
      }
    ]
  },
  height: 500,
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

基本设置

要将 Format Painter 插件添加到编辑器，请在编辑器配置的 plugins 选项中添加 formatpainter。

例如：

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

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

使用 Format Painter

可以通过键盘快捷键或工具栏按钮访问格式刷。

格式刷有两种工作模式：一种是获取格式，另一种是应用格式。键盘的使用方式与工具栏按钮的使用方式略有不同。

使用工具栏按钮

1. 将光标置于要获取格式的源内容处。

2. 启用 格式刷 按钮以复制格式。格式刷 工具栏按钮的背景颜色变为灰色 。

3. 选择要应用格式的目标内容。

结果：源内容的格式被应用到目标内容。

使用键盘

1. 将光标置于要获取格式的源内容处。

2. 按下 Ctrl+Alt+C 键读取格式。

3. 选择要应用格式的目标内容。

4. 按下 Ctrl+Alt+V 键以应用格式。

格式刷在应用格式后会保留该格式，因此可以通过使用 Ctrl+Alt+V 键盘快捷键多次应用相同的格式。

选项

格式刷会对编辑器中注册的所有formats 生效。除任何标准格式外，只要 lists plugin 可用，它会将列表视为块级格式。

formats

formatpainter 插件将在初始化时注册多种格式。要覆盖这些格式，请使用 formats 选项。

下面的示例展示了插件在初始化时自动注册的格式。formatpainter_removeformat 用于在应用新格式之前清除任何现有格式。它类似于 removeformat 格式。

类型： Object

示例：使用 formats

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'formatpainter',
  toolbar: 'formatpainter',
  formats: {
    formatpainter_checklist: { selector: 'ul', classes: 'tox-checklist' },
    formatpainter_liststyletype: { selector: 'ul,ol', styles: { listStyleType: '%value' } },
    formatpainter_borderstyle: { selector: 'td,th', styles: { borderTopStyle: '%valueTop', borderRightStyle: '%valueRight', borderBottomStyle: '%valueBottom', borderLeftStyle: '%valueLeft', }, remove_similar: true },
    formatpainter_bordercolor: { selector: 'td,th', styles: { borderTopColor: '%valueTop', borderRightColor: '%valueRight', borderBottomColor: '%valueBottom', borderLeftColor: '%valueLeft' }, remove_similar: true },
    formatpainter_backgroundcolor: { selector: 'td,th', styles: { backgroundColor: '%value' }, remove_similar: true },
    formatpainter_removeformat: [
      {
        selector: 'b,strong,em,i,font,u,strike,sub,sup,dfn,code,samp,kbd,var,cite,mark,q,del,ins',
        remove: 'all', split: true, expand: false, block_expand: true, deep: true
      },
      { selector: 'span', attributes: [ 'style', 'class' ], remove: 'empty', split: true, expand: false, deep: true },
      { selector: '*:not(tr,td,th,table)', attributes: [ 'style', 'class' ], split: false, expand: false, deep: true }
    ]
  }
});

formatpainter_ignored_formats

此选项可以阻止格式刷应用不需要的格式。

类型： String

默认值： 'link,address,removeformat,formatpainter_removeformat'

示例：使用 formatpainter_ignored_formats

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'formatpainter',
  toolbar: 'formatpainter',
  formatpainter_ignored_formats: 'link,address,removeformat,formatpainter_removeformat'
});

工具栏按钮

Format Painter 插件提供以下工具栏按钮：

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

• 使用 toolbar 配置选项。

• 使用 quickbars_insert_toolbar 配置选项。

• 自定义上下文工具栏。

命令

Format Painter 插件提供以下 TinyMCE 命令。

tinymce.activeEditor.execCommand('mceRetrieveFormats');
tinymce.activeEditor.execCommand('mcePaintFormats');
tinymce.activeEditor.execCommand('mceToggleFormatPainter');