@ckeditor/ckeditor5-template
Version:
Template feature for CKEditor 5.
124 lines (123 loc) • 3.79 kB
TypeScript
/**
* @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
*/
/**
* @module template/template
* @publicApi
*/
import { Plugin } from '@ckeditor/ckeditor5-core';
import { TemplateEditing } from './templateediting.js';
import { TemplateUI } from './templateui.js';
/**
* The template feature.
*
* For a detailed overview, check the {@glink features/template Content templates} feature guide.
*/
export declare class Template extends Plugin {
/**
* @inheritDoc
*/
static get requires(): readonly [typeof TemplateEditing, typeof TemplateUI];
/**
* @inheritDoc
*/
static get pluginName(): "Template";
/**
* @inheritDoc
*/
static get isOfficialPlugin(): true;
/**
* @inheritDoc
*/
static get isPremiumPlugin(): true;
}
/**
* The configuration of the template feature.
*
* ```ts
* ClassicEditor
* .create( {
* template: ... // Template feature configuration.
* } )
* .then( ... )
* .catch( ... );
*```
* See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
*/
export interface TemplateConfig {
/**
* A list of all template definitions to be displayed in the `'insertTemplate'` UI dropdown.
*
* An example configuration:
*
* ```json
* {
* 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: 'Example table',
* data: '<table><tr><td>Cell #1</td><td></td></tr><tr><td></td><td>Cell #2</td></tr></table>',
* icon: '<svg viewBox="0 0 45 45" xmlns="http://www.w3.org/2000/svg">...</svg>',
* description: 'This template inserts a table.'
* },
* {
* title: 'Insert userAgent data',
* data: navigator.userAgent
* },
* {
* title: 'Insert translate to English link (function)',
* data: () => '<a href="' + location.href + '/en" title="Translate to English">Translate to English</a>'
* },
* // ...
* ]
* }
* }
* ```
*/
definitions?: Array<TemplateDefinition>;
}
/**
* An object describing a single template definition.
*
* ```json
* {
* // Mandatory fields:
* title: 'Example template',
* data: '<table><tr><td>Cell #1</td><td></td></tr><tr><td></td><td>Cell #2</td></tr></table>',
*
* // Optional configuration:
* icon: '<svg viewBox="0 0 45 45" xmlns="http://www.w3.org/2000/svg">...</svg>',
* description: 'This template inserts a table.'
* }
* ```
*/
export type TemplateDefinition = {
/**
* The title of the template.
*/
title: string;
/**
* An HTML string to be inserted into the document or a callback function that returns an HTML string
* to be inserted into the document when the template is selected.
*/
data: (() => string) | string;
/**
* An optional SVG string representing the icon of the template. The default size of the icon is 45x45 pixels.
* Be sure to set the correct `viewBox` attribute in the icon source. If not provided, a generic icon will be used instead.
*/
icon?: string;
/**
* An optional long description of the template presented to the users.
*/
description?: string;
};