Solved

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

Posted on 2016-09-08
5
33 Views
Last Modified: 2016-09-14
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

0
Comment
Question by:evibesmusic
  • 4
5 Comments
 
LVL 7

Assisted Solution

by:Vimal DM
Vimal DM earned 500 total points
ID: 41791048
Hi,

check the below code if it works for you,

CKEDITOR.config.startupFocus = true;

Open in new window

0
 

Author Comment

by:evibesmusic
ID: 41791599
@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
 

Accepted Solution

by:
evibesmusic earned 0 total points
ID: 41791680
@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
 

Author Comment

by:evibesmusic
ID: 41791703
@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
 

Author Closing Comment

by:evibesmusic
ID: 41797520
A combination of the original suggested solution and my own tinkering lead to a solution.
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

778 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question