While I’ve been developing a newsletter module for Zend Framework this week, I have had to look at ckeditor very closely.
I saw that you can edit the templates that are available, and also the styles you can use.
Also the icons in the toolbar are customizable also.
I will quckly run through what you need to do to add a template to the ckeditor instance. It really is quite simple.
First thing to do is work out what you would like as a template.
Probably best to find this in a previous project or something, and customise it to suit a template.
Then take a screenshot and upload it to the directory. /ckeditor/plugins/templates/templates/images/
Then find the file that the templates are stored in, which would normally be located at /ckeditor/plugins/templates/templates/default.js
Then copy the code from the original item, and paste it in as follows, removing all line breaks in the html, so that it all sits on one line, and make sure
you dont use ‘ instead use ” where needed
add an entry in this style
{title:’Image and Title’,image:’screenshot.gif’,description:’Description Here.’,html:'<h3>html here</h3>’}
replacing the ‘Image and Title’ with the name of the template
replacing the ‘screenshot.gif’ with the name of the screenshot that you put into the images subdirectory.
replacing the ‘<h3>html here</h3>’ with the html of the template.
Open the image below to see where to put it.
To add the styles to the editor from a css file add it like this, change the line config.contentsCss = ‘/css/fckstyles.css’; to resemble the path used. Also remember to use this in the front end of your site also.
CKEDITOR.editorConfig = function( config )
{
config.toolbar = ‘MyToolbar’;
config.baseHref = ‘http://www.mysite.com/’;
config.entities = false;
config.contentsCss = ‘/css/fckstyles.css’;
config.htmlEncodeOutput = false;
config.font_names =
‘Arial/Arial, Helvetica, sans-serif;’ +
‘Times New Roman/Times New Roman, Times, serif;’ +
‘Verdana;’ +
‘Test;’;
config.toolbar_MyToolbar =
[
[‘Source’,’-‘,’Preview’,’Templates’,’Undo’,’Redo’],
[‘Cut’,’Copy’,’Paste’,’PasteText’,’PasteFromWord’,’-‘, ‘SpellChecker’, ‘Scayt’],[‘Maximize’, ‘ShowBlocks’],
[‘-‘,’Find’,’Replace’,’-‘,’SelectAll’,’RemoveFormat’],[‘Link’,’Unlink’,’Anchor’],
[‘Image’,’Flash’,’Table’,’HorizontalRule’,’Smiley’,’SpecialChar’,’PageBreak’],[‘Bold’,’Italic’,’Underline’,’Strike’,’-‘,’Subscript’,’Superscript’],
[‘NumberedList’,’BulletedList’,’-‘,’Outdent’,’Indent’,’Blockquote’],
[‘JustifyLeft’,’JustifyCenter’,’JustifyRight’,’JustifyBlock’],‘/’,
[‘Styles’,’Format’,’Font’,’FontSize’],
[‘TextColor’,’BGColor’]
];};
then, open the browser and click the templates button to check that it is there.
Too easy hey?
You can use this for anything you like, email templates, full pages, snippets. Enjoy, and I hope I helped someone.