Solved

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

Posted on 2016-09-08
5
65 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Give Your Engineering Team a Productivity Boost

Learn why container technology is so powerful and how it can provide your team with productivity gains and other benefits.

Question has a verified solution.

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

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

624 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