Description :

If you have requirement for a user to enter rich content in your form, instead of simple content i.e. in textbox or textarea. In this article you will learn how to include a rich text area in your form. In this text box you can add colors to your font, you can change font style, writing paragraphs and many more option are there in this rich text area. Follow the below the steps to get Rich text box.  

Step1 :

Add the below scripts and styles in your project.

1. jquery-1.10.2.js
2. Jscripts folder
3. content.css

Step2 :

Create a file named 'index.html' and add below content in that page.

[javascript] <script type="text/javascript" src="js/jquery-1.10.2.js" ></script> <!-- TinyMCE --> <script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script> <script language="javascript" type="text/javascript" src="js/editor_plugin.js"></script> <script> tinyMCE.init({ mode : "textareas", theme : "advanced", /* the URL to the button image to display */ atd_button_url : "images/atdbuttontr.gif", /* the URL of your proxy file */ atd_rpc_url : "server/proxy.php?url=", /* set your API key */ atd_rpc_id : "dashnine", /* edit this file to customize how AtD shows errors */ atd_css_url : "css/content.css", /* this list contains the categories of errors we want to show */ atd_show_types : "Bias Language,Cliches,Complex Expression,Diacritical Marks,Double Negatives,Hidden Verbs,Jargon Language,Passive voice,Phrases to Avoid,Redundant Expression", /* strings this plugin should ignore */ atd_ignore_strings : "AtD,rsmudge", /* enable "Ignore Always" menu item, uses cookies by default. Set atd_ignore_rpc_url to a URL AtD should send ignore requests to. */ atd_ignore_enable : "false", gecko_spellcheck : true, theme_advanced_buttons1 : "fontsizeselect,bold,italic,underline,strikethrough,separator,sub,sup,separator,cut,copy,paste,undo,redo,AtD", theme_advanced_buttons2 : "justifyleft,justifycenter,justifyright,justifyfull,separator,numlist,bullist,outdent,indent,separator,forecolor,backcolor,separator,hr,link,unlink,table,code", theme_advanced_buttons3 : "", theme_advanced_fonts : "Arial=arial,helvetica,sans-serif,Courier New=courier new,courier,monospace,Georgia=georgia,times new roman,times,serif,Tahoma=tahoma,arial,helvetica,sans-serif,Times=times new roman,times,serif,Verdana=verdana,arial,helvetica,sans-serif", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", plugins : 'asciimath,asciisvg,table,inlinepopups,media,AtD', // theme_advanced_toolbar_location: "external", editor_selector :"mceEditor", width:'100%', content_css : "css/content.css", forced_root_block : false, force_br_newlines : true, force_p_newlines : false, theme_advanced_resizing : true }); </script> [/javascript] [html] <textarea class="mceEditor"></textarea> [/html] Open the 'index.html' in any browser you will get the rich textbox. Add any content using toolbar options provided by Tinymce plugin. Thank you for reading article.