模板

模板功能允许您将预定义的内容结构插入文档中。模板可以提供较小的内容部分（例如格式化的表格）和整个文档的基础结构（例如，正式信函模板）。模板是一个有用的工具，可以加快写作过程并保持与公司文档和内容策略的一致性。

# 演示

单击模板按钮 打开下拉菜单并选择要应用的模板。您可以按标题搜索模板。

# 安装

在 安装编辑器 后，将该功能添加到您的插件列表和工具栏配置中

import { ClassicEditor } from 'ckeditor5';
import { Template } from 'ckeditor5-premium-features';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        // Load the plugin.
        plugins: [ Template, /* ... */ ],

        // Provide the licence key (see explanation below)
        licenseKey: '<YOUR_LICENSE_KEY>',

        // Display the "Insert template" button in the toolbar.
        toolbar: [ 'insertTemplate', /* ... */ ],

        // Configure the feature.
        template: {
            definitions: [
                {
                    title: 'The title of the template',
                    description: 'A longer description of the template',
                    data: '<p>Data inserted into the content</p>'
                },
                {
                    // ...
                },
                // More template definitions.
                // ...
            ]
        }
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# 激活功能

要使用此高级功能，您需要使用正确的凭据激活它。有关详细信息，请参考 许可证密钥和激活 指南。

# 配置

该功能的配置只是一个 模板定义 列表。

一个示例配置如下

{
    template: {
        definitions: [
            {
                title: 'Issue acknowledgement (plain text)',
                data: 'Dear customer, thank you for your report! The issue is currently being worked on by our development team.'
            },
            {
                title: 'Signature (multi-line)',
                data: '<p><b>Jane Doe</b></p><p>Marketing Specialist at <a href="https://example.com>Example.com</a></p>',
                description: 'Author signature with the link to the website.'
            },
            {
                title: 'Pricing table',
                data: '<figure class="table"><table><thead><tr><th style="text-align:center;">Feature</th><th style="background-color:hsl(90, 75%, 60%);text-align:center;">Free</th><th style="background-color:hsl(180, 75%, 60%);text-align:center;">Basic</th><th style="background-color:hsl(0, 75%, 60%);text-align:center;"><span style="color:hsl(0, 0%, 100%);">Professional</span></th><th style="background-color:hsl(270, 75%, 60%);text-align:center;"><span style="color:hsl(0, 0%, 100%);">Custom</span></th></tr></thead><tbody><tr><td style="text-align:center;">Feature #1</td><td style="background-color:hsl(90, 75%, 60%);text-align:center;">✅</td><td style="background-color:hsl(180, 75%, 60%);text-align:center;">✅</td><td style="background-color:hsl(0, 75%, 60%);text-align:center;">✅</td><td style="background-color:hsl(270, 75%, 60%);text-align:center;">✅</td></tr><tr><td style="text-align:center;">Feature #2</td><td style="background-color:hsl(90, 75%, 60%);text-align:center;">❌</td><td style="background-color:hsl(180, 75%, 60%);text-align:center;">✅</td><td style="background-color:hsl(0, 75%, 60%);text-align:center;">✅</td><td style="background-color:hsl(270, 75%, 60%);text-align:center;">✅</td></tr><tr><td style="text-align:center;">Feature #3</td><td style="background-color:hsl(90, 75%, 60%);text-align:center;">❌</td><td style="background-color:hsl(180, 75%, 60%);text-align:center;">❌</td><td style="background-color:hsl(0, 75%, 60%);text-align:center;">✅</td><td style="background-color:hsl(270, 75%, 60%);text-align:center;">✅</td></tr><tr><td style="text-align:center;">Feature #4</td><td style="background-color:hsl(90, 75%, 60%);text-align:center;">❌</td><td style="background-color:hsl(180, 75%, 60%);text-align:center;">❌</td><td style="background-color:hsl(0, 75%, 60%);text-align:center;">❌</td><td style="background-color:hsl(270, 75%, 60%);text-align:center;">✅</td></tr></tbody></table><figcaption>Pricing table</figcaption></figure>',
                icon: '<svg viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="41" height="41"><rect x="2" y="2" width="41" height="41" rx="5" fill="#59A5FF"/></mask><g mask="url(#a)"><rect x="2" y="2" width="41" height="41" rx="5" fill="#444"/><path fill="#ECECEC" d="M4 17h11v11H4z"/><path fill="#A9E6FA" d="M17 17h11v11H17z"/><path fill="#ECECEC" d="M30 17h11v11H30z"/><path d="M4 7a3 3 0 0 1 3-3h31a3 3 0 0 1 3 3v8H4V7Z" fill="#FF1A88"/><path d="M4 30h11v11H7a3 3 0 0 1-3-3v-8ZM17 30h11v11H17z" fill="#A9E6FA"/><path d="M30 30h11v8a3 3 0 0 1-3 3h-8V30Z" fill="#ECECEC"/></g></svg>',
                description: 'Product pricing table that compares individual plans.'
            },
            // More template definitions.
            // ...
        ]
    }
}

# 相关功能

以下是一些可以帮助您使用预定义内容块和文档的 CKEditor 5 功能

• 限制编辑 – 为具有限制编辑权限的用户定义文档的可编辑区域。
• HTML 嵌入 – 在编辑器中嵌入任意 HTML 代码段。
• 导出为 Word 功能允许您从编辑器创建的内容中生成可编辑的 .docx 文件。
• 导出为 PDF 功能允许您从编辑器创建的内容中生成可移植的 PDF 文件。

# 通用 API

Template 插件注册

• 'insertTemplate' UI 下拉菜单组件。
• 由 TemplateCommand 实现的 'insertTemplate' 命令。

您可以执行命令将任意内容插入用户选择位置的编辑器中

editor.execute( 'insertTemplate', '<p>Content of the template</p>' );