Out-of-the-box the JCK Editor comes packaged with 3 default template which can be applied to the editing area on the fly. These templates are predefined pieces HTML which can be used. You can edit the templates that are available, and also the styles you can use. Also the templates preview icons is customizable too! You can use this for anything you like, email templates, full pages, snippets.

I will quickly run through what you need to do to add a template to the JCK Editor - It really is quite simple! The first thing to do is work out what you would like as a template? It's probably best to find a html snippet or something from a previous project and customise it to suit. Then take a screenshot of your HTML template, crop it down to 100 x 70 pixels and upload the icon to the directory located here:

/public_html/plugins/editors/jckeditor/plugins/templates/templates/images/

The file that the templates are stored in is located in the default.js file found here:-

/public_html/plugins/editors/jckeditor/plugins/templates/templates/default.js

You can create and define your templates by simply adding your custom HTML code to the default.js file as detailed below:-

{
        title: 'Image and Title',
        image: 'template1.gif',
        description: 'One main image with a title and text that surround the image.',
        html: '<h3><img style="margin-right: 10px" height="100" width="100" align="left"/>Type the title here</h3><p>Type the text here</p>'
    }

Code Example:

/*
Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

CKEDITOR.addTemplates('default', {
    imagesPath: CKEDITOR.getUrl(CKEDITOR.plugins.getPath('templates') + 'templates/images/'),
    templates: [
    {
        title: 'Image and Title',
        image: 'template1.gif',
        description: 'One main image with a title and text that surround the image.',
        html: '<h3><img style="margin-right: 10px" height="100" width="100" align="left"/>Type the title here</h3><p>Type the text here</p>'
    },
    {
        title: 'Strange Template',
        image: 'template2.gif',
        description: 'A template that defines two colums, each one with a title, and some text.',
        html: '<table cellspacing="0" cellpadding="0" style="width:100%" border="0"><tr><td style="width:50%"><h3>Title 1</h3></td><td></td><td style="width:50%"><h3>Title 2</h3></td></tr><tr><td>Text 1</td><td></td><td>Text 2</td></tr></table><p>More text goes here.</p>'
    },
    {
        title: 'Text and Table',
        image: 'template3.gif',
        description: 'A title with some text and a table.',
        html: '<div style="width: 80%"><h3>Title goes here</h3><table style="float: right" cellspacing="0" cellpadding="0" style="width:150px" border="1"><caption style="border:solid 1px black"><strong>Table title</strong></caption></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></table><p>Type the text here</p></div>'
    }]
});

Then, open the browser and click the templates button to check that it is there.

Preview Example:

For more information on this topic please see the offical cksource documentations:

• http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Templates