jump to navigation

Integrate TinyMCE on HTML forms May 24, 2011

Posted by Tournas Dimitrios in PHP.

The text-area HTML form element is very simplistic , it can’t produce HTML formatted text . Even simple  tags like  paragraph , bold , italic … must be written manually . Probably visitors of a website doesn’t have HTML  knowledge , so they are limited to plain un-formatted text  . We can integrate  a WYSIWYG editor that will replace the HTML text-area form element , so that the visitors can format their submitted text .

TinyMCE has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances. TinyMCE is very easy to integrate into other Content Management Systems. The steps to be followed are :

  • Download the TinyMCE library
  • Unzip it and place it  on your web root’s directory ( http://yourdomain.com/TinyMCE )
  • Import the library in your HTML code by the proper ” script ” tags
  • Import the JQuery library as it is needed
  • Apply some configuration on the TinyMCE component
  • Create your HTML form text-area element

A practical example will prove how easy it is :

<meta charset=utf-8">
<title>Hello visitor</title>
<link href="styles/mainstyle.css" rel="stylesheet" type="text/css" media="screen">
<!-- Load jQuery -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript"> google.load("jquery", "1.3"); </script>
<!-- Load TinyMCE -->
<script type="text/javascript" src="/tinymce/jscripts/tiny_mce/tiny_mce.js" ></script >
<!-- Configure TinyMCE -->
<script type="text/javascript">
        mode : "textareas",
        theme : "advanced",
        plugins : "emotions,spellchecker,advhr,insertdatetime,preview", 
        // Theme options - button# indicated the row# only
        theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,|,justifyleft,justifycenter,justifyright,fontselect,fontsizeselect,formatselect",
        theme_advanced_buttons2 : "cut,copy,paste,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,|,code,preview,|,forecolor,backcolor",
        theme_advanced_buttons3 : "insertdate,inserttime,|,spellchecker,advhr,,removeformat,|,sub,sup,|,charmap,emotions",      
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true
        <h2>Contact Us </h2>
      <p>Please fill in the form , Your feedback is valuable to us !!!.</p>
        <form id="feedback" method="post" action="">
                <label for="name">Name:</label>
                <input name="name" id="name" type="text" class="formbox">
                <label for="email">Email:</label>
                <input name="email" id="email" type="text" class="formbox">
                <label for="comments">Comments:</label>
                <textarea name="comments" id="comments" cols="60" rows="18"></textarea>
                <input name="send" id="send" type="submit" value="Send message">
	<!-- Let's just test the output on our browser -->

The picture demonstrates the final result :

The TinyMCE component is highly configurable  , my example is derived from the official site .
Download the code of my example ( the library is also included ) or follow these instructions .


No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s