Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2016-09-08
5
Medium Priority
?
115 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 2000 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses

783 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