• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 4171
  • Last Modified:

How do i make the FCKEditor grab text focus?

I am working with coldfusion and the FCKEditor. How do i grab focus on the text area of the FCKEditor? Please take a look at the simplified cf code attached. When i click the button to grab focus on the text area, i get the following js error:

"Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept focus."

The text area is not invisible, disabled, and is a textarea so there's no reason why it shouldn't accept focus. If you have any ideas then correcting the attached cf code such that clicking the button DOES make FCKEditor text area grab focus would give me something to work with. Other suggestions are also welcome :)


<html>
<body>
<script language="javascript">
 
function dothis(){
	var x = document.getElementById('textarea');
	x.focus();
}
 
</script>
 
<cfform>
<cftextarea name="textarea" richtext="yes" height="300" />
 
<input type=button onclick="dothis();" value="focus" />
</cfform>
 
</body>
</html>

Open in new window

0
paddycobbett
Asked:
paddycobbett
  • 12
  • 10
  • 6
  • +1
2 Solutions
 
_agx_Commented:
Try giving the element an 'id' not just a 'name'

<cftextarea id='textarea' name="textarea" richtext="yes" height="300" />
0
 
paddycobbettAuthor Commented:
When the <cftextarea> resolves to html it's <textarea> "id" attribute is overridden (irrespective of whether i specify an id attribute value):

<textarea name="textarea"  id="cf_textarea1196318400601" height="300" ></textarea>

.. nevertheless, having probed it a little, i'm sure that the object returned by document.getElementById('textarea'); *does* return the text area, since i performed an alert:

var x = document.getElementById('textarea');
alert(x.height);

.. and it does return "300" as a valid height value, as specified. Any ideas?


0
 
_agx_Commented:
Yes, I can see that.   Since the textarea is linked to the editor, perhaps you have to call editor.focus() on the editor.  But that's just a guess and I don't know to do that.  

What's interesting is if you make the textarea required, CF doesn't give it focus like it does with textboxes.  
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
paddycobbettAuthor Commented:
When you say:

"What's interesting is if you make the textarea required"

.. what do you mean by "if you make the textarea required"?
0
 
Ryan ChongCommented:
try:

var oEditor = FCKeditorAPI.GetInstance('InstanceName') ;
oEditor.Focus();


more info, check this:
http://wiki.fckeditor.net/Developer's_Guide/Javascript_API

hope this helps
0
 
_agx_Commented:
You know how you can set a cfform's field to "required".  So when you submit the form, CF will display an error if nothing was entered .. then it will give focus() to the first field you left empty.

What's interesting is it works for text fields but not textareas.  Take this form. Click the submit button. You should get an error and the focus() should go to textbox1

<cfform>
<cfinput name="textbox1" required="true" message="Textbox1 is required.">
<cftextarea id='textarea' name="textarea" richtext="yes" height="300"  required="true"/>
<cfinput name="textbox2" required="true" message="Textbox2 is required.">
<input type="submit">
</cfform>

Now make the first field the cftextarea.  Click submit.  You'll get an error but the textarea doesn't get focus() .  It makes me wonder if focus() works with cftextareas

<cfform>
<cftextarea id='textarea' name="textarea" richtext="yes" height="300"  required="true"/>
<cfinput name="textbox2" required="true" message="Textbox2 is required.">
<input type="submit">
</cfform>
0
 
_agx_Commented:
ryancys is right about the editor.

I don't know enough about CF's implementation to get it to work with cftextarea.  I hacked together an example that shows calling editor.Focus(); works, but not if you remove the alert(elem.id);  So maybe there's a trick to it or something weird is going on with the focus() of the different objects.

Sorry ..but that about taps my knowledge of cftextarea ;-)

<script type="text/javascript">
      function testFocus() {
            var arr = document.getElementsByName('textarea');
                //get first textarea element found
            var elem = arr[0];
            alert(elem.id);
            var i = FCKeditorAPI.GetInstance(elem.id);
            i.Focus();
      }
</script>
<cfform>
<cftextarea id='textarea' name="textarea" richtext="yes" height="300"  required="true"/>
<input type="button" id="focusButton" value="Focus" onClick="testFocus();">
</cfform>
0
 
paddycobbettAuthor Commented:
ryancys, i presume you already took a look at my code, so when you suggested i specify:

var oEditor = FCKeditorAPI.GetInstance('InstanceName') ;
oEditor.Focus();

.. that i should replace InstanceName with the name i associated with my cftextarea? .. presuming that, the code attached is as suggested as by yourself.

With the code attached i get the following error:

'undefined' is null or not an object


<html>
<body>
<script language="javascript">
 
function dothis(){
	var oEditor = FCKeditorAPI.GetInstance('textarea') ;
	oEditor.Focus();
}
 
</script>
 
<cfform>
<cftextarea name="textarea" richtext="yes" height="300" />
 
<input type=button onclick="dothis();" value="focus" />
</cfform>
 
</body>
</html>

Open in new window

0
 
_agx_Commented:
paddycobbett,

I think CF creates instances by using the element id's. See my example above.
0
 
_agx_Commented:
ie CF uses 'cf_textarea1196318400601' not 'textarea'
0
 
paddycobbettAuthor Commented:
Thanks, your efforts are much appreciated, however i still receive js errors.. can you post me a corrected version of my original simplified cf code which would result in the focus of the FCK text area?
0
 
_agx_Commented:
This worked with IE6.  But did not work with FF/Opera.  



<script language="javascript">
function dothis(){
	var array = document.getElementsByName('textarea');
	var elem = array[0];
	alert(elem.id);
	var oEditor = FCKeditorAPI.GetInstance(elem.id) ;
    oEditor.Focus();
}
 
</script>
<cfform>
<cftextarea name="textarea" richtext="yes" height="300" />
<input type=button onclick="dothis();" value="focus" />
</cfform>

Open in new window

0
 
paddycobbettAuthor Commented:
I'm working with IE7, tho should be the same as IE6.. the above code does display the id, but i'm still not getting the text area to focus :S
0
 
Ryan ChongCommented:
I'm not too sure if <cftextarea> did creates a FCKEditor object by itself?

so are you trying to use a FCKEditor or a normal text area here?
0
 
_agx_Commented:
Not necessarily.  I've heard of a few differences/things that work in IE6 and don't in IE7.  

Try it with FF/2.  I think it may actually be working, but the initial cursor is wrong. So it seems like it doesn't have focus().  But if you start typing, you'll see it does. I could be wrong.. but I think there are some focus issues with the combination cftextarea+FCKEditor.
0
 
_agx_Commented:
@ryancys:

Yes, when you use <cftextarea richtext="yes" ...> CF automatically generates the code to create and link the editor to the cf control.  So when you view the page you can see all the usual FCKeditor options:  Style, Format, Font, Size [Bold], etc.  
0
 
Ryan ChongCommented:
I think you can try use a normal html textarea and see if that can resolve your problem? since the textarea element later will be transformed and look like a FCKEditor.
0
 
paddycobbettAuthor Commented:
What is interesting here _agx_ is using your last code posted does not result in any errors although the text area still fails to focus. Attached code is where i am with this, what does FCKeditorAPI.GetInstance-->Focus() acheive? It doesn't appear to focus the text area, although i receive no errors.. does this work for you?
<html>
<body>
 
<script language="javascript">
function dothis(){
        var array = document.getElementsByName('textarea');
        var elem = array[0];        
        var oEditor = FCKeditorAPI.GetInstance(elem.id) ;
        oEditor.Focus();        
}
 
</script>
<cfform>
<cftextarea name="textarea" richtext="yes" height="300" />
<input type=button onclick="dothis();" value="focus" />
</cfform>
 
</body>
</html>

Open in new window

0
 
SidFishesCommented:
why are you trying to use cftextarea or textarea at all?

fckeditor for cf creates its' own textarea...when its invoked. I think what you are seeing is a conflict...which is probably why it works in IE but not in "proper" browsers ;p IE is less strict about many things

you don't need anything else

to set focus just do something like

<body onLoad="document.getElementById('myTextArea').focus();">

that being said i do not know (but i think not) if you can combine fckeditor and cfform... I only use it with regular forms...


in application.cfm
 
<cfset request.FCKeditor = StructNew()>
 
<cfset request.FCKeditor.userFilesPath = "/pathtoeditor/FCKUserFiles">
 
 
then in your page
 
<cfscript>
 
	// Calculate basepath for FCKeditor. It's in the folder right above _samples
 
	basePath = "texteditor/";
 
 
	fckEditor = createObject("component", "pathtocomponent.texteditor.fckeditor");
 
	fckEditor.instanceName	= "myTextArea";
 
	fckEditor.value			= '#varText#';
 
	fckEditor.basePath		= basePath;
 
	fckEditor.width			= "100%";
 
	fckEditor.height		= 300;
 
	FCKeditor.ToolbarSet = 'Basic';
 
	fckEditor.create(); // create the editor.
 
</cfscript>

Open in new window

0
 
paddycobbettAuthor Commented:
I need to keep code intact with CF8 so am required to use <cftextarea>.. additionally the FCKEditor text area does not need to grab focus immediately on body "onLoad", it will be in response to some other behaviour of the user, hence my code example which *attempts* (currently unsuccesfully!) to grab focus (via javascript) in response to some user action. What i need is to *succesfully grab focus*! ;)
0
 
SidFishesCommented:
ok ...then I'll assume you're using the built in fckedito with cf8...and not the standalone...

the CF8 implementation is a bit "new" and afaik there is no easy way to do this however i did find an undocumented "feature" which will work for you (in FF anyways...haven't tried IE yet.


      try this test...

sets a focus to a text box and then click to set focus to the editor...note you have to have a " " (space) for the InsertHtml to work

editor.InsertHtml(""); doesn't work

interestingly enough, the space doesn't seem to actually be inserted...
            
this undocumented feature adapted from http://www.rakshith.net/blog/?p=22

            



<Script>
function findTA()
{
var editorinstance = ColdFusion.objectCache['bar'];
var editor = FCKeditorAPI.GetInstance(editorinstance.richtextid);
editor.InsertHtml(" ");
}
</Script>		
		
<body onload="document.getElementById('foo').focus();">
<cfform>
<cftextarea richtext="true"  name="bar" id="bar" ></cftextarea>
</cfform>
<input type="text" id="foo">
<button onclick="findTA();">Click</button>
</body>

Open in new window

0
 
paddycobbettAuthor Commented:
Thanks SidFishes, atlast some code which DOES focus on the text area. What's interesting tho strange however is that text needs to be inserted via:

editor.InsertHtml(" ");

.. before focus is grabbed. I could potentially insert via this function the contents of what is already there! But is there not a way of *just* grabbing the focus? .. surely this insert function after inserting the argument value grabs it somehow. Any ideas as to how i can bypass the need to insert text before grabbing the text focus??
0
 
SidFishesCommented:
"Any ideas as to how i can bypass the need to insert text before grabbing the text focus??


yep..looks like this works
<Script>
function findTA()
{
var editorinstance = ColdFusion.objectCache['bar'];
var editor = FCKeditorAPI.GetInstance(editorinstance.richtextid);
editor.Focus();
}
</Script>  
 
Just be aware though since the use of objectcache is undocumented, it's possible they'll make this behavior go away at some future hotfix or sp (although i'm thinking they'll expose the functionality since it seems so bleedin obvious that this is a pretty basis request.

Open in new window

0
 
_agx_Commented:
> does this work for you?

The last code I posted worked for me with FF/2 with the caveats I mentioned.  Did you ever try it with FF/2 or were you still trying to make it work with IE7?  Since it didn't work with IE6, its doubtful it would work with IE7.

Try SidFishes' suggestions.  He seems to have a better handle on the undocumented stuff pertaining to the new ("features" ;-) than me  
0
 
paddycobbettAuthor Commented:
Efforts from both parts are appreciated.

SidFishes, when i replace:

editor.InsertHtml(" ");

with:

editor.Focus();

.. whilst doesn't result in any js errors, doesn't result in the text area grabbing focus. There must be something we're missing here. editor.InsertHtml() inserts some text and grabs focus, any idea as to what that function does to grab focus after inserting the text?

0
 
SidFishesCommented:
i don't have 8 installed yet at home so I can't test in IE but it does work in FF... but as agx mentioned the cursor doesn't show but you can start typing...

if it was me, I'd be inclined to go with agx's solution as it's not in the undocumented zone ;) and since mine's undocumented, there is basically no other information that i've found other than what I've posted here... (doesn't mean there isn't info tho...)

I did some checking at House of Fusion and there are a couple of similar questions... with no resolution. The basic issue here is that the functionality you are looking for is poorly implemented by CF (and perhaps not at all in IE)

It's a piece of cake using standalone FCKeditor, but I'm not sure you'll find an answer...
Finally I guess the question I'd ask if it were me is do i need this functionality... realistically, 99.28% of users are going to know to click in the editor to use it...

all that being said I'll have look at this using IE tomorrow

0
 
_agx_Commented:
> The basic issue here is  that the functionality you are looking for is
> poorly implemented  by CF (and perhaps not at all in IE)

I'm inclined to agree. That's why I jokingly called this a new "feature"  (ie that's not a bug its a "feature" ;)  

In other languages I've encountered similar issues with focus when dealing with what you might call 'composite' objects.  This seems to be the same type of issue.  There isn't a problem with the separate objects: a plain cftextarea or FCKEditor alone, only with CF's combination of the two.
0
 
SidFishesCommented:
well, I've just checked and it does not work in IE7...and I think i can almost officially say it's an IE "feature"

"As it seems the new ie7 (tested with RC1) will block javascript focus calls to WYSIWYG editors!
I've submitted a bugreport for SPAW: http://sourceforge.net/tracker/index.php?func=detail&aid=1568843&group_id=77954&atid=551772
But the bug also aplies to Tiny MCE, FCK editor etc.
This bug will cause insert functions, to insert HTML into the editor, to insert the HTML into the body of the page when the focus is on the body of the page instead of the editor. The editors call editor.focus(); before they insert the HTML code, but this focus is blocked in ie7 so that doesn't work anymore. "
http://www.webmasterworld.com/javascript/3104483.htm

Note that this was posted a year ago so it may no longer apply...but given the way ms responds it may still be an issue...

so there you go...
0
 
_agx_Commented:
> will block javascript focus calls to WYSIWYG editors

You've got to be kidding me..
0
 
SidFishesCommented:
It's IE (standards...we don't need no steenking standards...)...

would I kid ;)
0
 
paddycobbettAuthor Commented:
Yes i agree, i would rather not seek an undocumented/unsupported method for doing this. Grabbing text focus on the FCKEditor didn't seem like a huge task, but sometimes even the most basic things have subtle complexities. After investigating some of the links here i will award credit for comments which most help shed light on this issue. Thanks again for all your comments :)
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 12
  • 10
  • 6
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now