Adding Content Templates to Editor in Kentico 9

It’s handy to adding site typography as content templates in Kentico CKeditor. Follow steps given below to add and customize CKeditor toolbar and include new content templates.

Important : Must check Kentico CKeditor version to download content templates from given link http://ckeditor.com/addon/templates.

Step1: Download sample content template from http://ckeditor.com/addon/templates. Extract downloaded zip folder and copy template folder in \CMS\CMSAdminControls\CKeditor\plugins. It should look like example image.

Content Template Plugin

 

 

 

 

 

 

 

 

 

 

 

 

 

Step 2: Adding config properties  – Open config.js file under CKeditor folder and add these lines on top of file along with other properties-

 

config.extraPlugins = ‘templates’;

/* CMS */

config.plugins += ‘,showborders’;

/* Templates */

config.plugins += ‘,templates’;

It should be like image example.

Kentico Template

 

 

 

 

 

 

 

Step3: Customize toolbar : Add template after source in toolbar_FULL

config.toolbar_Full = [

[sourceName, ‘-‘, ‘Templates’],

[‘Cut’, ‘Copy’, ‘Paste’, ‘PasteText’, ‘PasteFromWord’, ‘Scayt’, ‘-‘],

[‘Undo’, ‘Redo’, ‘Find’, ‘Replace’, ‘RemoveFormat’, ‘-‘],

[‘Bold’, ‘Italic’, ‘Underline’, ‘Strike’, ‘Subscript’, ‘Superscript’, ‘-‘],

[‘NumberedList’, ‘BulletedList’, ‘Outdent’, ‘Indent’, ‘Blockquote’, ‘CreateDiv’, ‘-‘],

[‘JustifyLeft’, ‘JustifyCenter’, ‘JustifyRight’, ‘JustifyBlock’, ‘-‘],

‘/’,

[‘InsertLink’, ‘Unlink’, ‘Anchor’, ‘-‘],

[‘InsertImageOrMedia’, ‘QuicklyInsertImage’, ‘Table’, ‘HorizontalRule’, ‘SpecialChar’, ‘-‘],

[‘InsertForms’, ‘InsertPolls’, ‘InsertRating’, ‘InsertYouTubeVideo’, ‘InsertWidget’, ‘-‘],

[‘Styles’, ‘Format’, ‘Font’, ‘FontSize’],

[‘TextColor’, ‘BGColor’, ‘-‘],

[‘InsertMacro’, ‘-‘],

[‘Maximize’, ‘ShowBlocks’]

];

It should be like:

Kentico

Step4: Setup toolbar_Full, At bottom of config file change value –

config.toolbar = config.toolbar_Full;

Now ckeditor is ready to use templates and can do testing after login in CMSDesk. Open editable page. Ckeditor should show template icon along with source.

Kentico Template

After clicking in template icon, it will show all available content templates.  You can select any of these templates and insert in editable part and modify accordingly. You don’t need to be worried about styling content text. It helps non technical person to make pages and style it easily.

capture5

 

 

 

 

 

 

 

 

 

 

 

Next part is,  how to add new templates in editor. Open default.js file under CKeditor/plugins/templates/templates/default.js

capture6

 

 

 

 

 

 

 

Default.js already has some inbuilt templates, you can add more templates using same structure. Using example I added youtube responsive video template at bottom of default.js file.

{

 

title: ‘Responsive YouTube Video (with controls)’,

//image: ‘template1.gif’,

description: ‘Responsive YouTube Video (with controls)’,

html: ‘<div class=”youtube-container”><div class=”youtube-player” data-controls=”1″ data-id=”h6w0uEgMXuQ”><div class=”play-button”> </div></div>’ +

‘\r\n</div><div style=”color:red;”>You must view source, edit the data-id and replace value with YouTube video id (then delete this line)</div>\r\n’

}

capture7

© Copyrights 2014 by STW Services LLP