Tutorial: add wysiwyg editor to administration pages editor

Hey all,
I'm sure we've all got to a point where you wanted to make a quick edit to a page of yours but didn't want to write it out using the text editor (for the html code).

I made an addition to my site which allows you to edit your page code (from within the Administration section) using a What you see is what you get visual editor. I also figured out how to add your stylesheet to the WYSIWYG editor.

DISCLAIMER:
I am donating this code that I spent quite a while learning how to do myself, i'm no expert but i'm passionate at learning. If this helps you out at all to live your dreams and gain more knowledge than my mission is successful. I am not able to warrant any cause from applying the code. I have tested it though and it works great.

Go to
http://ckeditor.com/download

Click Full Package and then click "Download CKEditor"

Once this is downloaded, upzip it and copy the ckeditor folder into:
administration/javascript/

You should now have a folder in there called
administration/javascript/ckeditor

with several files, in particular one called ckeditor.js

Next edit the following page:
administration/templates/default/pages/pagesform.tpl

Add in the following Javascript:

Code:

<literal>
<script type="text/javascript" src="http://www.YOUR WEB SITE ADDRESS/administration/javascript/ckeditor/ckeditor.js"></script>
 
 
</literal>

On line 56 (or similar) in the same /pagesform.tpl file you will find the following code:

Code:

<textarea name="pPageContent" id="elm1" style="width: 100%" rows="30" class="nostyle">{$pPageContent}</textarea>

Replace that with:

Code:

<textarea name="pPageContent" id="elm1" style="width: 100%" rows="30" class="ckeditor">{$pPageContent}</textarea>

Now if you would like to have your stylesheets also affecting the what you see is what you get editor box you can do the following:
Open
administration/javascript/ckeditor/config.js

In between

Code:

CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';

and

Code:

};

Add in

Code:

config.contentsCss = 'http://www.performancecentral.com.au/templates/TEMPLATENAME/css/STYLESHEET NAME.css';

If the editor is too small you can also add in this on the next line above your style code:

Code:

config.height = 500; 

I finally got around to adding this in. Please let me know how you all go.

Thanks!

Your most welcome Was good fun learning how to do it. I'm hoping I can share more in the near future