合并标签

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

Merge Tags 插件允许用户插入合并标签（也称为个性化令牌或邮件合并字段）。

可以通过在键入指定前缀时从下拉列表中选择，或者从可搜索的 Merge Tags 工具栏菜单按钮中选择并插入来插入合并标签。

一旦插入合并标签，插件会保留一个带有前缀和后缀的不可编辑变量，使其易于识别。

交互式示例

HTML

<textarea id="mergetags">
  <h1>服务提案 — {*Client.Name*}</h1>
  <h2>提交日期：{*Proposal.SubmissionDate*}</h2>
  <p>{*Client.Name*}，</p>
  <p>根据我们在 {*Client.LastCallDate*} 的讨论，请附上我们正式的服务提案。
  <p>{*Salutation*}，</p>
  <p>{*Consultant*}。</p>
</textarea>

JS

tinymce.init({
  selector: "textarea#mergetags",
  plugins: "powerpaste a11ychecker linkchecker wordcount table advtable editimage autosave advlist anchor advcode image link lists media mediaembed searchreplace visualblocks mergetags",
  toolbar: "mergetags | undo redo | styles | bold italic underline | link | align bullist numlist",
  mergetags_prefix: '{*',
  mergetags_suffix: '*}',
  mergetags_list: [
    {
      title: 'Client',
      menu: [
        {
          value: 'Client.LastCallDate',
          title: 'Call date'
        },
        {
          value: 'Client.Name',
          title: 'Client name'
        }
      ]
    },
    {
      title: 'Proposal',
      menu: [
        {
          value: 'Proposal.SubmissionDate',
          title: 'Submission date'
        }
      ]
    },
    {
      value: 'Consultant',
      title: 'Consultant'
    },
    {
      value: 'Salutation',
      title: 'Salutation'
    }
  ]
});

基本设置

tinymce.init({
  selector: 'textarea',  // 根据你的 HTML 更改此值
  plugins: 'mergetags',
  toolbar: 'mergetags',
  mergetags_list: [
    {
      title: 'Example merge tags list',
      menu: [
        {
          value: 'Example.1',
          title: 'Example one'
        },
        {
          value: 'Example.2',
          title: 'Example two'
        }
      ]
    }
  ]
});

有关将此插件与模块打包工具一起打包的信息，请参阅打包 TinyMCE - 概述。

Merge Tags 插件提供了一个自动补全器，用于在不使用工具栏按钮或菜单项的情况下添加合并标签。

自动补全器由输入指定前缀触发，该前缀由 mergetags_prefix 选项控制。

默认情况下，此前缀为 {{。

在前缀后输入字符开始过滤 Merge Tags 列表。

使用合并标签

1. 合并标签内容不可编辑，但可以应用任何内联格式。

   例如，合并标签可以设置为任何可用的字体、字号、前景色或背景色，或者设置为粗体或斜体。

2. 合并标签可以更改。

   通过使用 Merge Tags 工具栏菜单按钮，可以将选定的合并标签更改为任何其他合并标签。

3. 与现有合并标签匹配的文本在粘贴或插入到 TinyMCE 文档中时将被识别为合并标签。

   当粘贴到编辑器中时，包含指定前缀和后缀且匹配指定合并标签的内容将作为合并标签插入。例如，如果 Sender.Firstname 是一个合并标签值，且合并标签前缀和后缀具有默认值，那么将字符串 {{Sender.FirstName}} 添加到 TinyMCE 文档将导致该字符串自动被识别为合并标签。

4. 合并标签可以嵌套在 mergetags_list 选项中。

   mergetags_list 选项允许在 Merge Tags 工具栏菜单按钮中指定嵌套菜单项。此选项允许任意数量的嵌套菜单和项目以对合并标签进行分类。

样式化合并标签

可以使用通过 content_css 选项提供的自定义 CSS 文件来更改编辑器中合并标签的外观。以下是如何对合并标签元素进行样式化的示例。

.mce-content-body .mce-mergetag:hover {
    background-color: rgba(0, 108, 231, .1);
}

.mce-content-body .mce-mergetag-affix {
    background-color: rgba(0, 108, 231, .1);
    color: #006ce7;
}

以下是合并标签 HTML 结构的示例。

<span class="mce-mergetag">
  <span class="mce-mergetag-affix">{{</span>
    some.mergetag
  <span class="mce-mergetag-affix">}}</span>
</span>

合并标签与模板插入点标记

Templates 高级插件可以使用固定字符串 — {{mce-cursor}} — 来设置插入点，在模板添加到 TinyMCE 文档时。

此固定字符串默认使用与单个合并标签相同的默认分隔字符。但是，它不会干扰或以其他方式与任何 Merge Tags 配置交互。

Templates 插件在将包含插入点标记字符串的模板插入到 TinyMCE 实例之前，会移除该插入点标记字符串。

因此，Merge Tags 插件永远不会看到 Templates 插入点标记字符串。

因此，可以将插入点标记字符串 — {{mce-cursor}} — 用作合并标签。不过不建议这样做。除了是一个不太可能出现的合并标签字符串外，容易造成混淆也是一个足够充分的理由，避免在不同用途间重复使用它。

选项

mergetags_prefix

此选项指定要附加到每个合并标签的前缀。

无论此选项设置为何值，当在编辑器中输入该前缀时，都会触发 Merge Tags 自动补全器。

类型： String

默认值： {{

示例：使用 mergetags_prefix

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

mergetags_suffix

此选项指定要附加到每个合并标签的后缀。

类型： String

默认值： }}

示例：使用 mergetags_suffix

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

mergetags_list

mergetags_list 是一个对象数组，用于指定合并标签插入时使用的菜单内容。每个对象指定一个子菜单或菜单项的配置。

如果未设置 mergetags_list 选项，或该选项不包含任何条目，则 Merge Tags 工具栏按钮和 Merge Tags 菜单项都将隐藏。如果未设置 mergetags_list 选项，或该选项不包含任何条目，Merge Tags 自动建议功能也将被禁用。

类型： Array

菜单项属性

子菜单属性

示例：使用 mergetags_list

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'mergetags',
  toolbar: 'mergetags',
  mergetags_list: [
    {
      value: 'Current.Date',
      title: 'Current date in DD/MM/YYYY format'
    },
    {
      value: 'Current.Time',
    },
    {
      title: 'Person',
      menu: [
        {
          value: 'Person.Name.First',
          title: 'first name'
        },
        {
          value: 'Person.Name.Last',
          title: 'last name'
        },
        {
          value: 'Person.Name.Full',
          title: 'full name'
        },
        {
          title: 'Email',
          menu: [
            {
              value: 'Person.Email.Work'
            },
            {
              value: 'Person.Email.Home'
            }
          ]
        }
      ]
    }
  ]
});

工具栏按钮

Merge Tags 插件提供以下工具栏按钮：

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

• toolbar 配置选项。

• quickbars_insert_toolbar 配置选项。

• 自定义上下文工具栏。

菜单项

Merge Tags 插件提供以下菜单项：

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

• menu 配置选项。

• contextmenu 配置选项。

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