Solved

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

Posted on 2016-09-08
5
39 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

860 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