TinyMCE is a fully featured text editor developed using javascript and css. Text editor is an essential component in developing applications like content management systems, email clients and many more . It will provide the functionality to insert html,css,images and more other types of components in to a textarea that matches the given criteria. Once the data is submitted you can easily filter the tags and components using php in the server side and save the text area content to the database.

Step 1 – Go to http://tinymce.moxiecode.com/download/download.php link and download the tinyMCE library.

Step 2 – Extract the tinyMCE zip to your project folder.

Step 3 – Create a html file and insert the following lines of codes.

To set up tinyMCE we have to include the tiny_mcs.js in the html files. Make sure to provide the correct path to the tinymce folder depending on your extracted location. Then we can initialize the tinymce plugin for the textareas using tinyMCE.init function. In the above example i have only provided the most general attributes to install and work with tinymce.

Mode of textareas means all the textareas will be converted to text editors. You can filter the text editors using different values for mode option. All the mode values are explained in next sections. theme of simple means you will only get the basic styling elements like bold,italic,underline,undo,redo…etc. If you want more controls and styles you can set the theme to ‘advanced’ value.

Step 4 – Next you can insert the tags and html,text and submit to the server. In the server you can manage the received content using following php code.

        $message = isset($_POST['message']) ? $_POST['message'] : '';
        echo $message;

Since there is a separate integrated html view in the text editor user can enter any html tag and submit to the server. Due to security settings or display settings in your web site theme you may want to allow limited number of tags (Ex:span,code…etc). You can do this using php by filtering the tags you want to accept. Php strip_tags function can be used to filter tags. Following code will remove all the html elements other than code tag.

        $message = isset($_POST['message']) ? $_POST['message'] : '';
        $message = strip_tags($message,"");
        echo $message;

TinyMCE library has a complete list of options and settings to customize the text editor according to your need. In this section i am only going to explain most important options for normal cms projects. You can view the full list in the tinyMCE documentation at http://tinymce.moxiecode.com/wiki.php/Configuration.

In the previous example provided in installation process i have defined the width of the textarea using inline css styles inside the textarea. This is not a good practice since if there are lot of textareas to be converted into texteditors you may have to manually change everyone once the width or height has to be changed. so its wise to define the width and height for your text editors in the tinyMCE init method , which will allow you to change width and height of all the editors using a single code change.

 

Width and height in pixels

tinyMCE.init({
        height: "200",
        width : "640"
});

Width and height in percentage

tinyMCE.init({
        height: "60%",
        width : "90%"
});

Style format option allows you to define css styles for the html content inside the textarea. Using this customized formats user can create a well designed page
content inside the text editor. So you don’t have to define specific areas for specific contents in your cms page. Define a page and a main content area.Then you
can design the main content area inside the text editor. Once it is submitted to server it will be displayed as a original design.

Following code contains sample content formatting using style_formats attribute.You can create your own menus inside the tiny MCE editor.

tinyMCE.init({
    style_formats : [
        {title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
        {title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},
        {title : 'Table styles'},
        {title : 'Table Row', selector : 'tr', classes : 'tablerow'},
        {title : 'Table Border', selector : 'table',styles : {border : '1px solid'}}
    ]
});

In the above formats i have used 4 types of custom styling menus.

title : ‘Red text’ -> Once applied your selected content will wrap inside a span element which has a text color of red.
title : ‘Red header’ -> Once applied selected content will be wrapped inside h1 element which has a text color of red.
title : ‘Table styles’ -> This is a top menu item for table related custom styles.
title : ‘Table Row’ -> Applies the css class tablerow to the tr elements in the selected content.
title : ‘Table Border’ -> Once applied all the tables in the selected content will get a table border.

Above style formats will be displayed in a select(drop down) box inside the tinyMCE editor. Select the content in the textarea and click the dropdown option
to apply the css styles.

You may find a situation where you don’t have to apply the tinymce editor for all the textareas in the page. In such situations you can use the specific_textareas mode in the editor to filter the textareas you want. Following examples shows how to filter texareas using different criteria.

 

tinyMCE.init({
        mode : "specific_textareas",
        editor_selector : "messageBox"
});

Above example will apply text editor to textareas with the class messageBox.

tinyMCE.init({
        mode : "specific_textareas",
        editor_selector : /messageBox|commentBox/,
});

Above example will apply text editor to textareas with the class messageBox or commentBox.

tinyMCE.init({
        mode : "specific_textareas",
        editor_selector : /.*Box/,
});

Above example will apply text editor to textareas with the class name ending with Box.

tinyMCE.init({
        mode : "specific_textareas",
        editor_deselector : /.*Box/,
});

Above example will not apply text editor to textareas with the class name ending with Box.

TinyMCE modes allow you to accept or restrict applying text editor based on different conditions. There are 4 predefined modes available.

Mode Types with Examples

1.textareas – converts all textareas to text editors

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

2.specific_textareas – converts all textareas that matches given condition

tinyMCE.init({
        mode : "specific_textareas",
        editor_selector : /.*Box/,
});

3.exact – converts all textareas that matches given ids

tinyMCE.init({
        mode : "exact",
        editor_selector : "element_id",
});

4.none – does not convert any textareas.

tinyMCE.init({
        mode : "none",
});