Solved

How do i make the FCKEditor grab text focus?

Posted on 2007-11-28
33
4,100 Views
Last Modified: 2010-10-22
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
Comment
Question by:paddycobbett
  • 12
  • 10
  • 6
  • +1
33 Comments
 
LVL 52

Expert Comment

by:_agx_
ID: 20371712
Try giving the element an 'id' not just a 'name'

<cftextarea id='textarea' name="textarea" richtext="yes" height="300" />
0
 
LVL 1

Author Comment

by:paddycobbett
ID: 20371739
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
 
LVL 52

Expert Comment

by:_agx_
ID: 20371866
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
 
LVL 1

Author Comment

by:paddycobbett
ID: 20371881
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
 
LVL 49

Accepted Solution

by:
Ryan Chong earned 250 total points
ID: 20371891
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
 
LVL 52

Expert Comment

by:_agx_
ID: 20371901
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
 
LVL 52

Expert Comment

by:_agx_
ID: 20371959
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
 
LVL 1

Author Comment

by:paddycobbett
ID: 20371962
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
 
LVL 52

Expert Comment

by:_agx_
ID: 20371975
paddycobbett,

I think CF creates instances by using the element id's. See my example above.
0
 
LVL 52

Expert Comment

by:_agx_
ID: 20371996
ie CF uses 'cf_textarea1196318400601' not 'textarea'
0
 
LVL 1

Author Comment

by:paddycobbett
ID: 20372006
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
 
LVL 52

Expert Comment

by:_agx_
ID: 20372028
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
 
LVL 1

Author Comment

by:paddycobbett
ID: 20372054
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
 
LVL 49

Expert Comment

by:Ryan Chong
ID: 20372079
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
 
LVL 52

Expert Comment

by:_agx_
ID: 20372083
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 52

Expert Comment

by:_agx_
ID: 20372153
@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
 
LVL 49

Expert Comment

by:Ryan Chong
ID: 20372196
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
 
LVL 1

Author Comment

by:paddycobbett
ID: 20374161
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
 
LVL 36

Expert Comment

by:SidFishes
ID: 20374293
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
 
LVL 1

Author Comment

by:paddycobbett
ID: 20374478
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
 
LVL 36

Assisted Solution

by:SidFishes
SidFishes earned 250 total points
ID: 20375327
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
 
LVL 1

Author Comment

by:paddycobbett
ID: 20375728
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
 
LVL 36

Expert Comment

by:SidFishes
ID: 20377228
"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
 
LVL 52

Expert Comment

by:_agx_
ID: 20378175
> 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
 
LVL 1

Author Comment

by:paddycobbett
ID: 20378669
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
 
LVL 36

Expert Comment

by:SidFishes
ID: 20379456
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
 
LVL 52

Expert Comment

by:_agx_
ID: 20380375
> 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
 
LVL 36

Expert Comment

by:SidFishes
ID: 20384037
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
 
LVL 52

Expert Comment

by:_agx_
ID: 20384138
> will block javascript focus calls to WYSIWYG editors

You've got to be kidding me..
0
 
LVL 36

Expert Comment

by:SidFishes
ID: 20384872
It's IE (standards...we don't need no steenking standards...)...

would I kid ;)
0
 
LVL 1

Author Comment

by:paddycobbett
ID: 20386265
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 Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

705 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now