Index: lams_tool_assessment/web/pages/learning/parts/essay.jsp
===================================================================
diff -u -rb4efdafc56d24361458ebb803387771843e452f7 -r3a649f49d35d33b4ad25255118a46ac68e008da7
--- lams_tool_assessment/web/pages/learning/parts/essay.jsp	(.../essay.jsp)	(revision b4efdafc56d24361458ebb803387771843e452f7)
+++ lams_tool_assessment/web/pages/learning/parts/essay.jsp	(.../essay.jsp)	(revision 3a649f49d35d33b4ad25255118a46ac68e008da7)
@@ -1,48 +1,67 @@
 <%@ include file="/common/taglibs.jsp"%>
 <c:set var="isWordsLimitEnabled" value="${hasEditRight && (question.maxWordsLimit != 0 || question.minWordsLimit != 0)}"/>
 
-<c:if test="${isWordsLimitEnabled and not question.allowRichEditor}">
+<c:if test="${isWordsLimitEnabled}">
 <script type="text/javascript">
 	
 	$(document).ready(function() {
-		$("#essay-question${status.index}").on('change keydown paste', function(event){
-			var newText = '';
-			// if it is a single key typed
-			if (event.type == 'keydown') {
-				// try to figure out if it is a printable, standard character
-				if (!event.originalEvent.ctrlKey && event.originalEvent.key.length === 1){
-					newText = String.fromCharCode(event.originalEvent.keyCode);
-					if (!/^[a-zA-Z0-9\u0600-\u06FF\u0660-\u0669\u06F0-\u06F9 _.-]$/.test(newText)) {
-						newText = '';
-					}
-				}
-			} else if (event.type == 'paste') {
-				// get pasted data
-				newText = event.originalEvent.clipboardData || window.clipboardData;
-				newText = newText.getData('Text');
-			}
+		var isCkeditor = ${question.allowRichEditor};
 			
-			var value = $("#essay-question${status.index}").val() + newText,
-		    	wordCount = getNumberOfWords(value),
-		    	maxWordsLimit = ${question.maxWordsLimit};
-		    	
-			    if (maxWordsLimit > 0){
-				    var questionArea = $(this).closest('.question-area'),
-				    	warning = $('.max-word-limit-exceeded', questionArea);
-				    if (wordCount > maxWordsLimit){
-					    // prevent new text from being entered
-					    event.preventDefault();
-					    questionArea.addClass('bg-warning');
-						warning.slideDown();
-				    	return false;
-					} else {
-						questionArea.removeClass('bg-warning');
-						warning.slideUp();
+		if (isCkeditor) {
+			var ckeditor = CKEDITOR.instances['question${status.index}'];
+			ckeditor.on('change', function(){
+				$('#word-count${status.index}').html(this.wordCount.wordCount);
+			});
+
+			// trigger count after load
+			ckeditor.on('instanceReady', function() {
+				ckeditor.fire('change');
+			});
+		} else {
+			$("#essay-question${status.index}").on('change keydown paste', function(event){
+				var newText = '';
+				
+				// if it is a single key typed
+				if (event.type == 'keydown') {
+					// try to figure out if it is a printable, standard character
+					if (!event.originalEvent.ctrlKey && event.originalEvent.key.length === 1){
+						newText = String.fromCharCode(event.originalEvent.keyCode);
+						if (!/^[a-zA-Z0-9\u0600-\u06FF\u0660-\u0669\u06F0-\u06F9 _.-]$/.test(newText)) {
+							newText = '';
+						}
 					}
-			    }
-			
-			$('#word-count${status.index}').html(wordCount);
-		}).change();
+				} else if (event.type == 'paste') {
+					// get pasted data
+					newText = event.originalEvent.clipboardData || window.clipboardData;
+					newText = newText.getData('Text');
+				}
+				
+				var value = $("#essay-question${status.index}").val() + newText,
+			    	wordCount = getNumberOfWords(value),
+			    	maxWordsLimit = ${question.maxWordsLimit};
+			    	
+				    if (newText && maxWordsLimit > 0){
+					    var questionArea = $(this).closest('.question-area'),
+					    	warning = $('.max-word-limit-exceeded', questionArea);
+					    if (wordCount > maxWordsLimit){
+						    // prevent new text from being entered
+						    event.preventDefault();
+						    if (!warning.is(':visible')) {
+						    	questionArea.addClass('bg-warning');
+								warning.slideDown(function(){
+									setTimeout(function() {
+										questionArea.removeClass('bg-warning');
+										warning.slideUp();
+									}, 5000);
+								});
+						    }
+					    	return false;
+						}
+				    }
+				
+				$('#word-count${status.index}').html(wordCount);
+			}).change();
+		}
 	});
 </script>
 </c:if>
@@ -124,7 +143,7 @@
 			</td>
 		</tr>
 		
-		<c:if test="${isWordsLimitEnabled and not question.allowRichEditor}">
+		<c:if test="${isWordsLimitEnabled}">
 			<tr>
 				<td>
 					<fmt:message key="label.words" /> <span id="word-count${status.index}">0</span>