The Tech Mind

paan 21 July 2008 Articles 225 views No Comment Print This Post  Email This Post

After seeing countless phpld directory submission form. One thing strike me as strange. It’s that they still use your plain old text area as the input field for the site description. I’ve always thought that a rich text editor will be so much nicer. So long as you keep an eye on it and filter out any harmful or otherwise unwanted tags, it will be a good addition to phpld.

Let’s get started then.

The 2 main rich text editor right now is TinyMCE and FCKEditor.Both are good but personally I prefer TinyMCE, so we’ll go with that. First download a copy of tinyMCE from tinyMCE download page. The compressor php version is better because it is compressed so it downloads faster. But if you already have gz compression enabled on your website then it will cause problems and you need to use the plain vanilla version. The compressor php version is actually downloaded as an extra to tinyMCE, so if you want to use the compressed version you have to download both the normal version plus the compressor PHP version.

Now unzip the archive. The most logical location for the tinyMCE files are in the lib folder. So create a new tinyMCE folder and put everything in there. You directory should look more or less like this.

tinyMCE is now ready to be used. So we need to add the includes to the .js files.

A good place to put the includes is right after all the other includes in the admin template. After line 31.

1
2
3

<script src="files/admin.js" type="text/javascript"></script> <script src="files/ie5.js" type="text/javascript"></script>
<script src="files/XulMenu.js" type="text/javascript"></script> <script src="files/browser.js" type="text/javascript"></script>
<script src="files/tooltip.js" type="text/javascript"></script> <script src="files/pop-list.js" type="text/javascript"></script>

I am using the compressor PHP version so this is my include:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

{literal}
<!--tinymce-->
<script src="/libs/tinymce/tiny_mce_gzip.js" type="text/javascript"></script> <script type="text/javascript"><!--
tinyMCE_GZ.init({
	plugins : 'style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,'+
        'searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras',
	themes : 'simple,advanced',
	languages : 'en',
	disk_cache : true,
	debug : false
});
// --></script>
<script type="text/javascript"><!--
tinyMCE.init({
	theme : "advanced",
	mode : "textareas",
	plugins : "contextmenu, searchreplace",
        theme_advanced_toolbar_location : "top",
        convert_urls : false,
	theme_advanced_buttons3_add : "search,replace"
 
});
// --></script>
{/literal}

The first <script> tag is the gzip loader used to load the comppresed tinymce files. This is not needed if you are not using the compressed version of tinyMCE. The second <script> tag with the tinyMCE.init function is the important part. Here you can specify the options you want for your rich text editor.The option in it’s most basic form is:

1
2
3

tinyMCE.init({
mode : "textareas"
});

Which will give you the output like this:

You could customize it some more according to the options at the tinyMCE wiki. For me I finally settled for the above options which gives me this out put

You could, if you want to, only enable the rich text editor on only some of the textareas that are identified by a certain id. But personally I think that the few textareas that phpld has (one on submit page, one on the admin approve page, and one on the add/edit category page) are the ones that needs the rich text editor.

You could also put the rich text editor on the submit page by adding the tinyMCE includes on the header.tpl file in the template folder. It will allow users to submit site descriptions with the rich text editor. But I really would not do that untill we do some tags filtering on the output (which I will show how on the next article in the series) to prevent any abuse of the rich text editor.