Adding Content Templates to Editor in Kentico 9
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.
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.
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:
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.
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.
Next part is, how to add new templates in editor. Open default.js file under CKeditor/plugins/templates/templates/default.js
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’
}
