How to use tinymce with html forms

We all know tinymce is a platform independent web based Javascript HTML WYSIWYG editor.  It has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances.



I’ve used tinymce in many of my projects. I like it a lot because of it’s easy to use & rich functionality. But, despite of it’s simplicity many peoples i’ve seen, struggled to intigrate it with their forms. I don’t know why but, i’ve never face any such problem in my works.



So, in this small tutorial i’m going to share step by step how you can intigrate tinymce iwth your own web developemnt work.



Step-1

Download latest version of tinymce from the following download link & extract it.

Download link: http://tinymce.moxiecode.com/download.php



On Windows you could use WinZip or something similar, and on other operating systems such as Linux you simply extract the archive with the tar command. You can find an example on how to extract the archived file on Linux below. You should extract TinyMCE in your wwwroot or site domain root folder.



After extracting your tinymce folder structure will look like this…



TinyMCE folder structure





Step-2

After extraction of the tinymce files you just need to do some modification with the web form page where you want to use tinymce.



[1] Include a external js file

[2] Add some javascript codes in the headder section



The codes will look like this…



tinymce js file



Get the above javascript codes from here: http://wiki.moxiecode.com/index.php/TinyMCE:Installation



Note: This is very necessary to use approprite "tiny_mce.js" file path. This is very much important else, nothing will work.





Step-3

In the reciving side(PHP form action page) the data can be accessed by following way…




echo(stripslashes($_POST[‘content’])); 
 
//content is the textarea element name 





That’s it. Nothing more than this need to do. This will change your textarea to like this…



tinymce textarea output





For more info:

[1] http://tinymce.moxiecode.com/documentation.php

[2] http://wiki.moxiecode.com/index.php/TinyMCE:Index

[3] http://wiki.moxiecode.com/index.php/TinyMCE:Installation


16th Oct 2010 at 12:07 PM   3964 Views

Oop's, No Comments has been droped for this thread yet now.
Why don't you drop one.