CKEditor 3.x/Developers Guide/Templates - Revision history

Anna: /* The Templates Definitions File Contents */ Article section proof-read

2011-01-31T07:52:37Z

‎The Templates Definitions File Contents: Article section proof-read

Anna: /* Pointing the Editor to a Custom Templates Definition File */ Article section proof-read

2011-01-31T07:50:18Z

‎Pointing the Editor to a Custom Templates Definition File: Article section proof-read

Anna: /* Template Definition Files */ Article section proof-read

2011-01-31T07:47:59Z

‎Template Definition Files: Article section proof-read

Anna: Article introduction proof-read

2011-01-31T07:34:41Z

Article introduction proof-read

Anna: /* The Templates Definitions File Contents */ Article section proof-read

2011-01-13T14:12:23Z

‎The Templates Definitions File Contents: Article section proof-read

Anna: /* Pointing the Editor to a Custom Templates Definitions File */ Article section proof-read

2011-01-13T14:07:21Z

‎Pointing the Editor to a Custom Templates Definitions File: Article section proof-read

Anna: /* Template Definition Files */ Article section proof-read

2011-01-13T14:05:01Z

‎Template Definition Files: Article section proof-read

Anna: Article & codes formatted, icon added

2011-01-13T11:40:05Z

Article & codes formatted, icon added

AlfonsoML: fixed typo

2010-01-12T09:45:14Z

fixed typo

Fredck: Created page with 'With CKEditor, content writers can select a template from a list by clicking the "Templates" button in the toolbar. A template is a predefined piece of HTML that is placed inside…'

2009-12-30T16:08:28Z

Created page with 'With CKEditor, content writers can select a template from a list by clicking the "Templates" button in the toolbar. A template is a predefined piece of HTML that is placed inside…'

New page

With CKEditor, content writers can select a template from a list by clicking the "Templates" button in the toolbar. A template is a predefined piece of HTML that is placed inside the editor. In this way the user doesn't need to start writing from scratch. Designers can prepare well designed templates, avoiding user errors before they happen.

=== Template Definition Files ===

The editor comes with three sample templates that are there just to show the way it works. They are defined into the "plugins/templates/templates/default.js" file.

Developers should definitely change the default templates as they are not especially useful to end users.

Note that a template definition file is a JavaScript file that's loaded when opening the templates dialog for the first time. This file may be changed to include custom templates, or even better, you can create a separated template file outside the editor installation directory, configuring the editor to use it.

=== Pointing the Editor to a Custom Templates Definitions File ===

Assuming you have created a custom Templates Definitions file named "mytemplates.js" (starting from a copy of default.js) and have placed it into the root of your web site. Now, just add the following setting in the editor configuration:

<pre>
config.templates_files = [ '/mytemplates.js' ];
</pre>

Note that the [http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.templates_files templates_files] setting is an array, which means that more than one templates file can be used.

=== The Templates Definitions File Contents ===

This is a sample Template Definition file that defines two simple templates:

<pre>
// Register a templates definition set named "default".
CKEDITOR.addTemplates( 'default',
{
// The name of sub folder which hold the shortcut preview images of the templates.
imagesPath : CKEDITOR.getUrl( CKEDITOR.plugins.getPath( 'templates' ) + 'templates/images/' ),

// The templates definitions.
templates :
[
{
title: 'My Template 1',
image: 'template1.gif',
description: 'Description of my template 1.',
html:
'<h2>Template 1</h2>' +
'<p><img scr="/logo.png" style="float:left" />Type the text here.</p>'
},
{
title: 'My Template 2',
html:
'<h3>Template 2</h3>' +
'<p>Type the text here.</p>'
}
]
});
</pre>

As we can see here, the above is pure JavaScript code. It's a simple call to the [http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html#.addTemplates CKEDITOR.addTemplates] function, which registers the templates under a unique name ("default"). This name can be then used by the [http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.templates templates] setting.

@@ Line 21: / Line 21: @@
 CKEDITOR.addTemplates( 'default',
+{
-	// The name of the subfolder that holds the preview images of the templates.
+	// The name of the subfolder that contains the preview images of the templates.
 	imagesPath : CKEDITOR.getUrl( CKEDITOR.plugins.getPath( 'templates' ) + 'templates/images/' ),
-	// The template definitions.
+	// Template definitions.
 	templates :
+		[
@@ Line 45: / Line 45: @@
 </source>
-The above example contains pure JavaScript code. It is a simple call to the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html#.addTemplates CKEDITOR.addTemplates]</code> function, which registers the templates under a unique name (<code>default</code>). This name can be later used by the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.templates templates]</code> setting.
+The above example contains pure JavaScript code. It is based on a call to the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html#.addTemplates CKEDITOR.addTemplates]</code> function that registers the templates under a unique name (<code>default</code>). This name can be later used by the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.templates templates]</code> setting.

@@ Line 12: / Line 12: @@
 </source>
-Note that the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.templates_files templates_files]</code> setting is an array, which means that more than one template file can be used.
+Note that the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.templates_files templates_files]</code> setting accepts an array, which means that more than one template file can be used at any time.
 === Template Definition File Contents ===

@@ Line 2: / Line 2: @@
 === Template Definition Files ===
-CKEditor comes with three sample [[CKEditor 3.x/Users Guide/Document/Templates|templates]] that are there just to show the way this feature works. They are defined in the <code>plugins/templates/templates/default.js</code> file. Developers should most definitely modify the default templates as they are not particularly useful to end users.
+CKEditor comes preinstalled with three sample [[CKEditor 3.x/Users Guide/Document/Templates|templates]] that are there just to show the way this feature works. They are defined in the <code>plugins/templates/templates/default.js</code> file. Developers should most definitely modify the default templates as they are not particularly useful to end users.
-Note that a template definition file is a JavaScript file that is loaded when opening the '''Content Templates''' dialog window for the first time. This file may be modified to include custom templates, or you can create a separate template file outside the editor installation directory, and configuring the editor to use it.
+Note that a template definition file is a JavaScript file that is loaded when opening the '''Content Templates''' dialog window for the first time. This file may be modified to include custom templates, or you can create a separate template file outside the editor installation directory and configure the editor to use it.
 === Pointing the Editor to a Custom Templates Definition File ===

← Older revision		Revision as of 07:34, 31 January 2011
Line 1:		Line 1:
−	With CKEditor, content writers can select a template from a list by clicking the [[Image:CKEditor_templates.png\|Templates]] button in the toolbar. A template is a predefined piece of HTML that is ~~placed inside the editor~~. In this ~~way~~ the user ~~doesn't~~ need to start ~~writing~~ from scratch. Designers can prepare well designed templates~~, avoiding~~ user errors before they happen.	+	With CKEditor content writers can select a template from a list by clicking the [[Image:CKEditor_templates.png\|Templates]] button in the toolbar. A template is a predefined piece of HTML that is inserted into a document. Using this feature, the user does not need to start formatting the text from scratch. Designers can prepare well designed templates which helps avoid user errors before they happen.

	=== Template Definition Files ===		=== Template Definition Files ===

@@ Line 14: / Line 14: @@
 Note that the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.templates_files templates_files]</code> setting is an array, which means that more than one template file can be used.
-=== The Templates Definitions File Contents ===
+=== Template Definition File Contents ===
-This is a sample Template Definition file that defines two simple templates:
+Below you will find a sample template definition file that defines two simple templates.
 <source language="js">
-// Register a templates definition set named "default".
+// Register a template definition set named "default".
 CKEDITOR.addTemplates( 'default',
+{
-	// The name of sub folder which hold the shortcut preview images of the templates.
+	// The name of the subfolder that holds the preview images of the templates.
 	imagesPath : CKEDITOR.getUrl( CKEDITOR.plugins.getPath( 'templates' ) + 'templates/images/' ),
-	// The templates definitions.
+	// The template definitions.
 	templates :
+		[
@@ Line 30: / Line 30: @@
 				title: 'My Template 1',
 				image: 'template1.gif',
-				description: 'Description of my template 1.',
+				description: 'Description of My Template 1.',
 				html:
 					'<h2>Template 1</h2>' +
-					'<p><img src="/logo.png" style="float:left" />Type the text here.</p>'
+					'<p><img src="/logo.png" style="float:left" />Type your text here.</p>'
 			},
+			{
@@ Line 39: / Line 39: @@
 				html:
 					'<h3>Template 2</h3>' +
-					'<p>Type the text here.</p>'
+					'<p>Type your text here.</p>'
+			}
+		]
@@ Line 45: / Line 45: @@
 </source>
-As we can see here, the above is pure JavaScript code. It's a simple call to the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html#.addTemplates CKEDITOR.addTemplates]</code> function, which registers the templates under a unique name (<code>default</code>). This name can be then used by the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.templates templates]</code> setting.
+The above example contains pure JavaScript code. It is a simple call to the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html#.addTemplates CKEDITOR.addTemplates]</code> function, which registers the templates under a unique name (<code>default</code>). This name can be later used by the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.templates templates]</code> setting.

@@ Line 1: / Line 1: @@
-With CKEditor, content writers can select a template from a list by clicking the "Templates" button in the toolbar. A template is a predefined piece of HTML that is placed inside the editor. In this way the user doesn't need to start writing from scratch. Designers can prepare well designed templates, avoiding user errors before they happen.
+With CKEditor, content writers can select a template from a list by clicking the [[Image:CKEditor_templates.png|Templates]] button in the toolbar. A template is a predefined piece of HTML that is placed inside the editor. In this way the user doesn't need to start writing from scratch. Designers can prepare well designed templates, avoiding user errors before they happen.
 === Template Definition Files ===
+The editor comes with three sample templates that are there just to show the way it works. They are defined into the <code>plugins/templates/templates/default.js</code> file.
 Developers should definitely change the default templates as they are not especially useful to end users.
@@ Line 10: / Line 9: @@
 === Pointing the Editor to a Custom Templates Definitions File ===
+Assuming you have created a custom Templates Definitions file named <code>mytemplates.js</code> (starting from a copy of <code>default.js</code>) and have placed it into the root of your website. Now, just add the following setting in the editor configuration:
-<pre>
+<source language="js">
 config.templates_files = [ '/mytemplates.js' ];
-</pre>
+</source>
-Note that the [http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.templates_files templates_files] setting is an array, which means that more than one templates file can be used.
+Note that the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.templates_files templates_files]</code> setting is an array, which means that more than one templates file can be used.
 === The Templates Definitions File Contents ===
 This is a sample Template Definition file that defines two simple templates:
-<pre>
+<source language="js">
 // Register a templates definition set named "default".
 CKEDITOR.addTemplates( 'default',
@@ Line 49: / Line 46: @@
+		]
 });
-</pre>
+</source>
-As we can see here, the above is pure JavaScript code. It's a simple call to the [http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html#.addTemplates CKEDITOR.addTemplates] function, which registers the templates under a unique name ("default"). This name can be then used by the [http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.templates templates] setting.
+As we can see here, the above is pure JavaScript code. It's a simple call to the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html#.addTemplates CKEDITOR.addTemplates]</code> function, which registers the templates under a unique name (<code>default</code>). This name can be then used by the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.templates templates]</code> setting.