1) on the admin/contents_insert.php and admin/contents_update.php page, change the following code:
$CKEditor_config["toolbar"] = array(
array( 'Source','DocProps','-','Save','NewPage','Preview','-','Templates'),
array( 'Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'),
array( 'Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'),
array( 'Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'),
array( 'Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'),
array( 'FitWindow','-','About'),
('/'),
array( 'Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'),
array( 'OrderedList','UnorderedList','-','Outdent','Indent'),
array( 'JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'),
array( 'Link','Unlink','Anchor'),
('/'),
array( 'Style','FontFormat','FontName','FontSize'),
array( 'TextColor','BGColor'));
to:
$CKEditor_config["toolbar"] = array(
array( 'Source','DocProps','-','Preview'),
array( 'Cut','Copy','Paste','PasteText','PasteFromWord','-','SpellChecker'),
array( 'Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'),
array( 'Image','Flash','Table','HorizontalRule','Smiley', 'SpecialChar','PageBreak'),
('/'),
array( 'Bold','Italic','Underline','Strike','-','Subscript','Superscript'),
array( 'NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'),
array( 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'),
array( 'Link','Unlink','Anchor'),
('/'),
array( 'Styles','Format','Font','FontSize'),
array( 'TextColor','BGColor'),
array( 'Maximize','ShowBlocks'));
2) in the admin/contents_insert.php and admin/contents_update.php page
chagne the following code:
$CKEditor->editor("ContentValue", $CKEditor_initialValue, $CKEditor_config);
to:
$CKEditor_config["stylesCombo_stylesSet"] = "my_styles:style_lists/stylelist1.js";
$CKEditor->editor("ContentValue", $CKEditor_initialValue, $CKEditor_config);
3) in the admin/contents_insert.php and admin/contents_update.php page, add a reference to the style sheet, for example:
<link rel="stylesheet" type="text/css" href="../mycss.css"/>
4) Create a new folder in the webassist/ckeditor folder named "style_lists", inside that folder create a new js file named "stylelist1.js"
5) add the following code:
CKEDITOR.addStylesSet("my_styles",
[ { name: "my red div", element: "div", ordered_list: [ "a:0" ], attributes: { "class" : "myredclass" } },
{ name: "my blue div", element: "div", ordered_list: [ "a:0" ], attributes: { "class" : "myblueclass" } },
]);
this will add two items to the style list:
my red div
my blue div
selecting my red div will add a div around the selected text with a class of "myredclass"
<div class="myredclass">selected text</div>
you can add other items to the style list using the same format of:
Name - what will be displayed in the list
Element - the type of element it applies to
attributes - how the style is added to the tag.
more details on the addStylesSet can be found here.
Styles
