paddycobbett
asked on
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 :)
"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>
ASKER
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_textarea11963184006
.. nevertheless, having probed it a little, i'm sure that the object returned by document.getElementById('t
var x = document.getElementById('t
alert(x.height);
.. and it does return "300" as a valid height value, as specified. Any ideas?
<textarea name="textarea" id="cf_textarea11963184006
.. nevertheless, having probed it a little, i'm sure that the object returned by document.getElementById('t
var x = document.getElementById('t
alert(x.height);
.. and it does return "300" as a valid height value, as specified. Any ideas?
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.
What's interesting is if you make the textarea required, CF doesn't give it focus like it does with textboxes.
ASKER
When you say:
"What's interesting is if you make the textarea required"
.. what do you mean by "if you make the textarea required"?
"What's interesting is if you make the textarea required"
.. what do you mean by "if you make the textarea required"?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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>
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>
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
//get first textarea element found
var elem = arr[0];
alert(elem.id);
var i = FCKeditorAPI.GetInstance(e
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>
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
//get first textarea element found
var elem = arr[0];
alert(elem.id);
var i = FCKeditorAPI.GetInstance(e
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>
ASKER
ryancys, i presume you already took a look at my code, so when you suggested i specify:
var oEditor = FCKeditorAPI.GetInstance('
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
var oEditor = FCKeditorAPI.GetInstance('
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>
paddycobbett,
I think CF creates instances by using the element id's. See my example above.
I think CF creates instances by using the element id's. See my example above.
ie CF uses 'cf_textarea1196318400601'
ASKER
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?
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>
ASKER
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
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?
so are you trying to use a FCKEditor or a normal text area here?
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.
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.
@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.
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.
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.
ASKER
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--
<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>
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.getElemen
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...
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.getElemen
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>
ASKER
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*! ;)
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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??
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??
"Any ideas as to how i can bypass the need to insert text before grabbing the text focus??
yep..looks like this works
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.
> 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
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
ASKER
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?
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?
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
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
> 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.
> 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.
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...
"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...
> will block javascript focus calls to WYSIWYG editors
You've got to be kidding me..
You've got to be kidding me..
It's IE (standards...we don't need no steenking standards...)...
would I kid ;)
would I kid ;)
ASKER
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 :)
<cftextarea id='textarea' name="textarea" richtext="yes" height="300" />