How to add focus to CKEditor which is presented inside jQuery UI dialog?

Experts,

I am using jQuery UI and CKE Editor together.

I initiate my CKEditor instance within a jQuery UI dialog.

Once the dialog and CKEditor instance are fully loaded, I'd like to add focus to the last line of text within the editor.

I've seen many examples which use the simple .focus() method but, it doesn't seem to work for me and I have a feeling it is due to the use of the jQuery UI dialog.

Any ideas how to get this to work?

//CLICK TEXT AREA, SHOW POP-UP AND TEXT EDITOR
$('.textarea').click(function(){
	var field_id = $(this).attr('id');
	var original_field_content = $(this).html();
	//APPEND TEXT AREA TO HIDDEN DIV USED FOR DIALOG
	$('#dialog').append('<textarea id="dialog_'+field_id+'">'+original_field_content+'</textarea>');
	//CREATE CK EDITOR INSTANCE ON TEXT AREA JUST CREATED
	$('#dialog_'+field_id).ckeditor();
	//OPEN DIALOG
	$('#dialog').dialog({
		title: $(this).attr('title'),
		resizable: false,
		height: 400,
		width: $(window).width()*.75,
		modal: true,
		buttons: {
			"Save": function(){
				var field_content = $("#dialog_"+field_id).val();
				$.ajax({
					method: 'POST',
					url: 'scripts/save.php',
					data: {
						step: $("#"+field_id).attr('step'),
						field_id: field_id,
						field_content: field_content
					}
				}).done(function(){
					window.location.assign('./');
				}).fail(function(){
					alert('Unable to save.\n\nPlease try again.');
				});
			}//END FUNCTION
		},//END BUTTONS
		close: function(){
			$(this).dialog("close");
			$('#dialog').empty();
		}//END CLOSE
	});//END DIALOG
});//ENC CLICK FUNCTION

Open in new window

evibesmusicAsked:
Who is Participating?
 
evibesmusicAuthor Commented:
@All:

I got it to work. You can see a working fiddle here: Fiddle

I had to change a few lines of code in order to get the jQuery function originally posted to work.

NOTE: The only issue with this solution is that it places the focus at the beginning of the content within the editor and not at the end as desired.

Changed:

      //CREATE CKEDITOR INSTANCE ON TEXT AREA JUST CREATED
      $('#dialog_'+field_id).ckeditor();

To:

      //CREATE CKEDITOR INSTANCE ON TEXT AREA JUST CREATED
      CKEDITOR.config.startupFocus = true;
            CKEDITOR.replace('dialog_'+field_id);
0
 
Vimal DMSenior Software EngineerCommented:
Hi,

check the below code if it works for you,

CKEDITOR.config.startupFocus = true;

Open in new window

0
 
evibesmusicAuthor Commented:
@Vimal DM:

Not sure where I am supposed to place that code? In the CKEditor config.js file? Or inside my function above?

I've tried both and neither add focus to the CKEditor instance created inside the dialog.
0
 
evibesmusicAuthor Commented:
@All:

The code below now properly adds focus to the CKEditor element and places the cursor at the end of the text inside.

	$('.textarea').click(function() {
	  var field_id = $(this).attr('id');
	  var original_field_content = $(this).html();
	  //APPEND TEXT AREA TO HIDDEN DIV USED FOR DIALOG
	  $('#dialog').append('<textarea id="dialog_' + field_id + '">' + original_field_content + '</textarea>');
	  //CREATE CK EDITOR INSTANCE ON TEXT AREA JUST CREATED
	  CKEDITOR.replace('dialog_' + field_id, {
	    on: {
	      focus: function(evt) {
	        setTimeout(function() {
	          var editor = evt.editor,
	            range = editor.createRange();

	          range.moveToElementEditEnd(editor.editable());
	          range.select();
	          range.scrollIntoView();
	        }, 100);
	      }
	    }
	  });
	  //OPEN DIALOG
	  $('#dialog').dialog({
	    title: $(this).attr('title'),
	    resizable: false,
	    height: 400,
	    width: $(window).width() * .75,
	    modal: true,
	    buttons: {
	      "Save": function() {
	          var field_content = $("#dialog_" + field_id).val();
	          $.ajax({
	            method: 'POST',
	            url: 'scripts/save.php',
	            data: {
	              step: $("#" + field_id).attr('step'),
	              field_id: field_id,
	              field_content: field_content
	            }
	          }).done(function() {
	            window.location.assign('./');
	          }).fail(function() {
	            alert('Unable to save.\n\nPlease try again.');
	          });
	        } //END FUNCTION
	    }, //END BUTTONS
	    close: function() {
	        $(this).dialog("close");
	        $('#dialog').empty();
	      } //END CLOSE
	  }); //END DIALOG
	}); //END CLICK FUNCTION

Open in new window

0
 
evibesmusicAuthor Commented:
A combination of the original suggested solution and my own tinkering lead to a solution.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.