| Creating custom templates? |
|
|
| Written by Administrator |
| Wednesday, 02 June 2010 13:53 |
|
A template is a predefined piece of HTML that can be applied to the editors editing area. By default the editor comes with three sample templates which can be modified /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>'
}
Example file:-
/*
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> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr></table><p>Type the text here</p></div>'
}]
});
For more information on this topic please see the cksource documentation: http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Templates |
| Last Updated on Wednesday, 02 June 2010 14:52 |

