How To Wait Until User Has Finished Typing In TinyMCE

Performing analysis on content that a user is typing is a common requirement for interfaces. A simple word counter, for example, will need to bind to an event so that it can scan the text when the user has modified the data. There are ways to do this using jQuery, but what if you want to do it with TinyMCE? This guide will show you how to call an event when the user has finished typing with the TinyMCE editor.

The main reason for logic like this is to be able to run a function but wait until the user has given all of the information you need. There is no point in calling the function every time they lift up a key. The user will likely type faster than the code can execute. This is why it is important to wait until they have finished. Unfortunately, there is no event you can tap into that will trigger when the user has finished typing in TinyMCE. It is very easy to implement this on your own though.

The first part of this will require you to add code to handle the keyup event. This is done during the init of the framework. The “setup” property of the init object will allow you to handle various events. KeyUp is one of these. Tapping into this event is only one part of the process. You will need to also add additional logic to prevent the resulting function being called every time the user types a letter.

People have written lots of libraries and extension methods to handle delays in javascript. There is already some simple functionality built-in under the timeout objects as part of the editor framework. Declare a global timer before you load up TinyMCE. Each time the key up event is fired, reset the timer. This will allow you to define a specific amount of time to wait after the user has typed the last key.

Most people will press a key more than once per second while typing. Setting the timeout to one second seems like a save number to go with. The timer works with milliseconds. Entering 1000ms will count as 1 second. The code below can be used to call a function called “DoSomething” 1 second after the user has finished typing something into the TinyMCE editor.

var keypupTimer;
tinymce.init({
	selector:'#myeditor',
	setup : function(ed) {      
		ed.on('KeyUp', function (e) {	
			clearTimeout(keypupTimer);
			keypupTimer = setTimeout(DoSomething, 1000);				
		});					
	}
});

function DoSomething()
{
	var editorText = tinyMCE.activeEditor.getContent();
}

You can rename the DoSomething function to whatever you like. Since you will more than likely be doing some kind of analysis on the content the user is typing, I have added code to get the editor text inside this method. If you do not need it, you can remove it. If the user has a very large document written, the call to get the text from the active editor could slow the page down.

Related Articles

Related Questions

Function Keys Reversing Between Fn Actions And Normal

My keyboard has the usual F1 to F12 keys along the top. I use these for shortcuts in various applications. These keys also have...

Whirlpool Oven F6E6: Appliance Manager 1 Board Communication

I have a brand new Whirlpool oven W11I OM1 4MS2 H or (859991549450). I bought it alongside the microwave combi oven. I have had...

Whats the difference between the Tapo P100 and the P105?

There are a few different Tapo smart plugs. The P100 and P110 differ based on the smart power monitoring feature but where does the...

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Latest Tools

Memory Converter

Converting values between various metric measurements is usually quite simple as there will be 1000 of the smaller unit in the next larger unit....

Bitrate Converter

Below you will find a bitrate converter. This tool will allow you to enter a bitrate value, in one of many different formats and...

Aesthetic Text Generator

There are various ways to make your social media profile seem more unique, some of which are not as easy to implement as others....

Aspect Ratio Calculator For Images

Aspect ratio is the ratio between the height and width of an image. If you want to resize an image by 100 pixels, you...

Add Text To Image

Use this free tool to add text to an image. Simply select the image file that you want to overlay text onto and you...

JavaScript Multi-line String Builder

Javascript did not always support multi-line strings. If you attempted to create a string variable using quotes, putting a line break into the source...

Latest Posts

Latest Questions