Character count plugin For Tiny MCE editor

TinyMCE is a HTML WYSIWYG editor.  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 like wordpress. You can download the TinyMCE editor from the following link .

To include the TinyMCE editor we need to include the following code.

 <script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>

<script language="javascript" type="text/javascript">
 theme : "advanced",
 mode: "exact",
 elements : "txt_job_desc",
 skin : "o2k7",
 plugins : "maxchars",
 max_chars : 1000,
 max_chars_indicator : "txt_job_desc",

theme_advanced_toolbar_location : "top",
 theme_advanced_toolbar_align : "left",
 theme_advanced_buttons1 : "bold,italic,underline,|,justifyleft,justifycenter,justifyright,"

theme_advanced_buttons2 : "bullist, numlist, outdent, indent, |, cut,copy,paste,pastetext,"
 + "blockquote,|,undo,redo,|,link,unlink,anchor,cleanup,help,code",

theme_advanced_buttons3 : "",
 theme_advanced_path : false,
 theme_advanced_statusbar_location : "bottom",
 file_browser_callback : 'myFileBrowser',

setup : function(ed) {
 ed.onKeyUp.add(function(ed, e) {

//manually setting our max character limit
 tinymax = 1000;
 var strip = (tinyMCE.activeEditor.getContent()).replace(/(<([^>]+)>)/ig,"");
 tinylen = strip.length;
 htmlcount = "You have entered: " + tinylen + " characters";

//if the user has exceeded the max turn the path bar red.
 if (tinylen>tinymax){
 htmlcount = "<span style='font-weight:bold; color: #f00; !important!'> You have exceeded the limit </span>"
 tinymce.DOM.setHTML(tinymce.DOM.get( + '_path_row'), htmlcount);

<form action="" method="post" enctype="multipart/form-data">

<textarea name="txt_company_desc"  id="textarea_id" cols="5" rows="20" >The default text here</textarea>



We have used ‘maxchars’ plugin to count the number of characters entered in the editor.
You can download the ‘maxchars’ plugin from the following link.

The above code will display the character count in status bar and it will undo the typed text when the user exceeded the limit. Here we are initializing tinymax = 1000 , it means after 1000 characters , alert message will be shown to the user.

elements : “txt_company_desc”,

In TinyMCE initialiazation we need to give id name of textarea. If we have more than one textareas we can modify the code as follows

elements : “textarea_id, textarea_id2”,