Php, javascript, tinymce and setfocus after save event (submit form)

Question

0.00/5 (No votes)

See more:

I have developed a small application for my own use to keep track of the hours I worked for customers.

There is a page there that includes a TinyMCE editor that I use to write down the tasks done.

I've added the SAVE plugin, which allows to submit the form the TinyMCE editor is embedded into.

And I'd like to be able to set the focus back to the TinyMCE editor when the page loads after the save event.

I've tried several approaches I've found on the Internet, but none worked for me.

I am using the latest version 6.7 (today).

The way I insert TinyMCE in my form is the following one:

JavaScript

<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({
    		selector: '#notes',
				plugins: 'lists table save',
        toolbar: 'bullist numlist bold italic underline strikethrough subscript superscript indent outdent forecolor backcolor table save',
				width : '".$width."',
				height : '".$height."',
				branding: false,
				menubar:false,
				browser_spellcheck: true,
				resize: 'both',
       	});
		</script>

"notes" is the ID of the textarea that becomes replaced by the TinyMCE editor instance.

Do you know of the right syntax to do this?

Thank you all for your time and help.

What I have tried:

I've tried several methods but none of this worked for me:

JavaScript

<script>tinyMCE.get("#notes").focus();</script>
<script>tinyMCE.get("#notes").get().focus();</script>
<script>tinyMCE.get("#notes").getBody().focus();</script>
<script>tinyMCE.get({#notes}).focus();</script>
<script>tinyMCE.get(#notes_ifr).focus();</script>

Of course, I've called all those separately (to test one by one) and after the element creation.

Posted 13-Sep-23 6:46am

Joan M

Updated 13-Sep-23 7:38am

Deeksha Shenoy

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2023-09-14T00:16:00

According to the documentation[^], you need to pass the auto_focus option in the init method:

JavaScript

tinyMCE.init({
    selector: '#notes',
    auto_focus: 'notes',
	plugins: 'lists table save',
    toolbar: 'bullist numlist bold italic underline strikethrough subscript superscript indent outdent forecolor backcolor table save',
	width : '".$width."',
	height : '".$height."',
	branding: false,
	menubar:false,
	browser_spellcheck: true,
	resize: 'both',

setup: function (editor) {
          editor.on('init', function () {
              editor.focus();
              editor.selection.select(editor.getBody(), true);
              editor.selection.collapse(false);
          });
      }});