SharePoint Word Count with Rich Text Editor

This could only be achieved via custom development and is not possible by using SharePoint’s out
of the box features or setup options  this following blog where a word count is achieved with JavaScript:

But there is also an exception , it is only working for a Input element.

Rich Text Box are different than normal text box

<TD vAlign=top width=190 noWrap>
<H3><NOBR>RichText</NOBR> </H3></TD>
<TD vAlign=top RteRedirect=”[Control Chain]_TextField_inplacerte”><!– FieldName=”RichText”
<DIV style=”DISPLAY: none” id=[Control Chain]_TextField_inplacerte_label>Rich text editor</DIV>
<DIV aria-haspopup=true style=”MIN-HEIGHT: 84px” id=[Control Chain]_TextField_inplacerte role=textbox aria-labelledby=[Control Chain]_TextField_inplacerte_label contentEditable=true InputFieldId=”[Control Chain]_TextField_spSave” UseInlineStyle=”True” aria-autocomplete=”both” aria-multiline=”true”>
<DIV style=”CLEAR: both”></DIV></DIV>
<SPAN dir=ltr><INPUT id= [Control Chain]_TextField_spSave name=[Control Chain]TextField_spSave type=hidden> </SPAN></SPAN></TD>

Text Area :
<TR><TD vAlign=top width=190 noWrap>
<H3><NOBR>RichText</NOBR> </H3></TD>
<TD vAlign=top><!– FieldName=”RichText”
<SPAN><TEXTAREA id=”[Control_Chain]_TextField title=RichText cols=20 rows=6 name=””></TEXTAREA>

SharePoint 2010 has using also div based RTE so javascript codes based on above artilce can be adjust like that;

<script src="<your jquery path and version>/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('div[role*="textbox"]').bind('keyup blur',function(e){
 var thisLength = $(this).text().length;
if(true && thisLength>0){
thisLength = $(this).text().split(/[' '|\n]/).length;

if(true && 200>0){

}else if(thisLength>(200-10)){


currVal = $(this).text();
$(this).val(currVal.substring(0,currVal.lastIndexOf(' ')));
currVal = $(this).text();
thisLength = (200-thisLength<0)?0:200-thisLength;

$("#myCustomCounter_").html("Remaining words asda: "+thisLength);
}).parents('td:first').append("<span id='myCustomCounter_' style='padding:2;'></span>").find('input[name*="TextField_spSave"]');


About bpostaci
Escalation Engineer in Microsoft.

Leave a Reply

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

You are commenting using your 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 )

Connecting to %s

%d bloggers like this: