Implement MDN Code

JavaScript
1

I was directed to this page from MDN by the help documents of a code editor I am trying to use. The information seems straightforward. However, I cannot seem to get this to work. I am trying to trigger a blur when a user moves out of the text editor. Should I be able to utilize this code here? Thanks

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.3.2/tinymce.min.js"></script>
	

    <script>
      tinymce.init({
        selector: '#mytextarea',
		menubar: false,
		statusbar: false,
		toolbar: false,
		height : "780"

      });
	  
	  
    </script>

  </head>

  <body>

    <form method="post">
      <textarea id="mytextarea">My contents are from</textarea>
    </form>
	
	<script>
	 function saveForm() {
	  var theParam = tinymce.get('mytextarea').getContent();
	 }
	 
 	 const mta = document.getElementById('mytextarea');
 
 	 mta.addEventListener('blur', (event) => {
 	   event.target.style.background = 'pink';
 	 }, true);
 	</script>
	
  </body>
</html>
2

The blur event only works on elements that can gain and lose focus.

TinyMCE replaces the textarea with other elements that simulate a textarea. Those other elements though do not support the blur event, which is why it’s not triggering for you there.

TinyMCE provides a different way of doing events. Details and sample code are at https://www.tiny.cloud/docs/advanced/events/#supportedbrowser-nativeevents

3

OK, so I see the information on that page. The page gives an example at the top and then seems to state that native MDN events are available. Does that mean then can be substituted into the example at the top? Can they be setup to work outside to the tinymce.inti() function? Thanks

4

I don’t think that they can work outside of tinymce.init. They have been forced to use their own custom technique because they don’t do things in normal ways supported by the browser.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.