插件 \ template 内容模板
+toolbar按钮+menu项

此页更新时间：2019-05-02 20:20

此页英文文档：https://www.tiny.cloud/docs/plugins/template/

该插件实现了自定义内容模板。

tinymce.init({
    selector: '#tinydemo',
    plugins: "template",
    toolbar: "template",
    templates: [
        {title: 'Some title 1', description: 'Some desc 1', content: 'My content'},
        {title: 'Some title 2', description: 'Some desc 2', url: 'print.php'}
    ]
});
此插件相当强大，

配置选项

templates

取值：Array/String

该选项负责定义点开该插件后提供的模板列表。其值为一个包含若干对象的数组，每个数组元素包含title标题、description描述、content模板内容/url模板代码地址

如果该选项的值是一个字符串，那么该字符串将被解析成URL，该url应返回与上面格式相同的json结构。

上面的例子是使用数组对象，而下面则是使用URL返回模板：

tinymce.init({
    selector: '#tinydemo',
    plugins: "template",
    toolbar: "template",
    templates: "/dir/templates.php"
});

访问templates.php返回的内容格式如下：

[
    {"title": "Some title 1", "description": "Some desc 1", "content": "My content"},
    {"title": "Some title 2", "description": "Some desc 2", "url": "development.html"}
]

template_cdate_classes

其值为一个类名列表字符串，多个类用空格分隔。模板代码中使用该列表中的类，其内部都将替换为创建时间(creationdate)。该时间格式使用参数“template_cdate_format”设定。默认形如：2019-04-23

template_cdate_format

设定上个参数生成的当前时间的格式

两个参数用法见下面例子：

tinymce.init({
    selector: '#tinydemo',
    plugins: "template",
    toolbar: "template",
    templates: [
        {title: 'cdate', description: 'cdate', content: '这是模板内容，<b class="cdate">加粗这里将会显示%m/%d/%Y : %H:%M:%S</b>。'}
    ],
    template_cdate_classes: "cdate creationdate",
    template_cdate_format: "%m/%d/%Y - %H:%M:%S",
});

template_mdate_classes

与cdate用法类似，不同的是其生成的时间是修改时间（modifieddate）

template_mdate_format

为template_mdate_classes生成的时间指定格式。用法同上。

template_replace_values

自定义模板变量，将模板中出现的变量替换为定义的值。

tinymce.init({
    selector: '#tinydemo',
    plugins: "template",
    toolbar: "template",
    templates: [
        {title: 'cdate', description: 'cdate', content: 'Name: {$username}, StaffID: {$staffid}'}
    ],
    template_replace_values: {
        username: "Lucy",
        staffid: "89757"
    }
});

模板代码为：Name: {$username}, StaffID: {$staffid}

生成内容为：Name: Lucy, StaffID: 89757

template_selected_content_classes

其值为一个类名列表字符串（多个类用空格分隔），具有列表中某个类的模板元素在首次插入时都将其内容替换为当前选中的编辑器内容。

通俗解释：就是你在内容区选中一串文本比如ABC，那么在模板中具有参数中类的元素，其内容均会被替换成ABC。

注意，模板插入位置是当前光标所在位置，而选中文本也就意味着光标所在位置就是选中的文本位置，模板会被插入并替换掉选中的文本。
tinymce.init({
    selector: '#tinydemo',
    plugins: "template",
    toolbar: "template",
    templates: [
        {title: 'selcontent', description: 'selcontent', content: '这是模板内容，<b class="selcontent">这里会被替换为选定的内容</b>，这里也是<b class="selcontent">会被替换</b>。'}
    ],
    template_selected_content_classes: "selcontent",
});

制作模板

模板是一个由div包裹的html代码文件。除该div之外的html代码都在预览框中显示给用户。

模板比简单的代码片段包含更多功能，例如，一个模板可以具有动态内容，这些动态内容可由template_replace_values的设定进行更新。每次执行整理程序时会执行这些函数。

每个模板代码最外层div都应该包含一个名为“mceTmpl”的类，例如：

<!-- This will not be inserted -->
<div class="mceTmpl">
  <table width="98%"  border="0" cellspacing="0" cellpadding="0">
    <tr>
      <th scope="col"> </th>
      <th scope="col"> </th>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
    </tr>
  </table>
</div>

制作代码片段

代码片段是可以插入的html代码块。replace片段只在插入时执行，替换变量只在插入时执行。所以，如果在template_replace_values定义了somevar1，它将在预览和插入时被替换。

这是一个<strong>代码片段示例</strong>。somevar1将会被替换成: {$somevar1}。

汉化中……

下一节：textcolor 文字颜色

▲