Re: Limit the Number of characters entered in the editor
Hi Guys I never usually post but since the amount of time I have spent trying to get all of these to work I will post the solution I have come up with.
This is using perreault, and garygfx code examples.
Basically Perreaults code gave me a few issues with IE with multiple forms. Also his was not dynamic so you could not put it cross site instead had to call specific forms and give names of each.
garygfx had good code but also could not dynamically pick up the forms on a page and process accordingly.
I have taken both of these and added a few extra lines to dynamically determine the id of the form and also use this information to place the text in the correct location.
Please note that the html and div tags have to be named appropriatly. Mainly the div tags has to have the same id name plus count, and max read above for more details from perr post.
Also I have not had a chance to fully test but appears to work correctly. Once I have cleaned it up and mabey added a few extra features I will repost.
If anyone finds an error or issue please let me know and I will correct or try to atleast.
Best of luck.
********************************Script***************************
<script language="javascript" type="text/javascript">
// Notice: The simple theme does not use all options some of them are limited to the advanced theme
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "iespell",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,bullist,numlist,separator,outdent,indent,separator,undo,redo,separator,link,unlink,separator,charmap,separator,code,removeformat,separator,iespell",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "" ,
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "center",
handle_event_callback : "myHandleEvent",
onchange_callback : "myCustomOnChangeHandler",
oninit : "myCustomOnInit"
});
var text1_count=0;//init int
var text1_maxchars=3000;// max plain text chars allowed
var text1_undobuffer="";//init string
//init when unit TinyMCE editor is loaded
function myCustomOnInit(){
tinyMCE_timer1=setTimeout("countchars('Process', tinyMCE.selectedInstance.formTargetElementId ,text1_maxchars,'msgCounter')",1000); //wait a bit to avoid IE error
}
//event when something in TinyMCE changes (which is when an undo level is added. e.g. paste)
function myCustomOnChangeHandler(inst){
tinyMCE_timer1=setTimeout("countchars('Process', tinyMCE.selectedInstance.formTargetElementId ,text1_maxchars,'msgCounter')",250); //slight delay before counting
}
//event such as key or mouse press
function myHandleEvent(e){
//window.status = "event:" + e.type;
if(e.type=="keyup"){
clearTimeout(tinyMCE_timer1);
countchars('Process',tinyMCE.selectedInstance.formTargetElementId,text1_maxchars,'msgCounter')
}
return true;
}
function getHTML_TinyMCE(txtfield){
var editor_id=tinyMCE.selectedInstance.formTargetElementId;
obj=document.getElementById(editor_id + 'Max').innerHTML;
if(obj.contentDocument){
content=obj.contentDocument.body.innerHTML; //FireFox (getContent() messes up cursor position)
}else{
content=tinyMCE.getContent(txtfield); //IE
}
return content;
}
function stripTags_TinyMCE(txtfield) { //strips html tags leaving plain text
content=getHTML_TinyMCE(txtfield);
var re = /(<([^>]+)>)/ig ; //strip all tags
plaintext = content.replace(re, "");
return plaintext;
}
function countchars_TinyMCE(txtfield){
content=stripTags_TinyMCE(txtfield);
cnt=content.length;
//alert(cnt);
return cnt;
}
function countchars(formname,txtfield,maxchars,displayID){
//editor_id=tinyMCE.selectedInstance.formTargetElementId; // get ID of focused TinyMCE editor
thefield=eval("document."+formname+"."+txtfield);
if(isNaN(maxchars)){ //arg could contain a var name rather than a number
maxchars=eval(maxchars); //convert var to number
}
currCount=countchars_TinyMCE(txtfield); // current length of TinyMCE field
remainCount=maxchars-currCount+1; //fix: allow +1
tmpvar=txtfield+'_count';
eval(tmpvar + '=currCount'); //assign dynamic var to char count
var editor_id=tinyMCE.selectedInstance.formTargetElementId;
var Show=editor_id + 'Count';
displayObj=document.getElementById(Show);
displayObj.innerHTML="You have " + eval(remainCount-1) + " characters remaining"; //-1 to counteract above +1
if(remainCount<=0){ //typed too much
if(text1_undobuffer.length > 0){
tinyMCE_timer2=setTimeout("tinyMCE.setContent(text1_undobuffer)",250); // undo event - replace content with most recent buffer
};
displayObj.innerHTML="<B>You have typed the maximum text allowed</B>";
} else {
text1_undobuffer=getHTML_TinyMCE(txtfield); //store content in buffer
}
}
</script>*****************************************************************
****************Page HTML****************************************
<table width="545" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div id="DescriptionCount">Click inside text area to update current character count.</div><div id="DescriptionMax" style="display:none">3000</div></td>
</tr>
</table>
<table width="545" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<textarea name="Description" id="Description" style="width:545px; height:150px"><%=varDescription%></textarea>
</td>
</tr>
</table>*****************************************************************
PS I am not sure the buffer part is working correctly in IE. You can get past it by waiting a second and then pasting your text in agian. It will not go back but keep your over the limit text changes. If anyone comes up with a quick fix let me know.
PSS Ok one last issue. Since this is made for a include file it may be placed on a page with forms but without textareas. in this case IE pops up the script error message were
tinyMCE.selectedInstance.formTargetElementId is null even though it should never even be processing that part. Any ideas how to fix this issue. Thanks
-Drew
Last edited by drewber09 (2007-05-17 18:35:29)
... but it's understandable.