By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
445,876 Members | 1,239 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 445,876 IT Pros & Developers. It's quick & easy.

IE/Mozilla WYSIWYG editor - problems with IE and queryCommandEnabled

P: n/a
I am having a problem with Internet Explorer and javascript on a WYSIWYG
editor I am creating. It all works in Mozilla, but IE returns flase for
queryCommandEnabled('forecol'). JS isn't my strong suit, so I am turning
to all you experts for help. What am I missing here? Other commands like
formatblock, fontsize and fontname all work fine, so I assume that it
has something to do with not getting the correct selection because of
the iframe. Any help is greatly appreciated.

In an HTML document I have the following line:

<img src="images/forecol.png" onClick="DoTextFormat('forecolor','')"
id="forecolor">
<iframe width="175" height="125" id="forecolor0" src="palette.html"
style="visibility: hidden; position: absolute; left: 0px; top:
0px;"></iframe>

palette.html is like this:
<html>
<head>
<title>Color Palete</title>
<script language="JavaScript" type="text/javascript">
<!--
function selectColor(color){
self.parent.setColor(color);
}
function InitColorPalette(){
if (document.getElementsByTagName)
var x = document.getElementsByTagName('TD');
else if (document.all)
var x = document.all.tags('TD');
for (var i=0;i<x.length;i++){
x[i].onclick = click;
}
}
function click(){
str=this.id;
color=str.replace('c','#');
selectColor(color);
}
-->
</script>
<style type="text/css">
<!--
html,body{margin: 0px; padding: 0px;}
td{border: black none 2px;}
td:hover{border: white solid 2px;}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>

<body bgcolor="white" onLoad="InitColorPalette()">
<table border="0" cellpadding="0" cellspacing="2">
<tr>
<td id="cFFFFFF" bgcolor="#FFFFFF" width="15" height="15">&nbsp;</td>
<td id="cFFCCCC" bgcolor="#FFCCCC" width="15" height="15">&nbsp;</td>
....

In the included javascript source file I have the following functions:

function DoTextFormat(command, option){
if((command=='forecolor') || (command=='hilitecolor')){
parent.command=command;
layerid=command+'0';
buttonElement=document.getElementById(command);

document.getElementById(layerid).style.left=getOff setLeft(buttonElement)
+ 'px';

document.getElementById(layerid).style.top=(getOff setTop(buttonElement)
+ buttonElement.offsetHeight) + 'px';
if(document.getElementById(layerid).style.visibili ty=='hidden')
document.getElementById(layerid).style.visibility= 'visible';
else{
document.getElementById(layerid).style.visibility= 'hidden';
}

//get current selected range
var
sel=document.getElementById('iView').contentWindow .document.selection;
if(sel!=null){
rng=sel.createRange();
}
}else{

if(document.getElementById('iView').contentWindow. document.queryCommandEnabled(command)){

document.getElementById('iView').contentWindow.doc ument.execCommand(command,
false, option);
return true;
}else return false;
}
document.getElementById('iView').contentWindow.foc us();
}

function setColor(color){
elem=command+'0';
if(browser.isIE5up){
//retrieve selected range
var
sel=document.getElementById('iView').contentWindow .document.selection;
if(sel!=null){
var newselectionRange=sel.createRange();
newselectionRange.select();
}
}else{
document.getElementById('iView').contentWindow.foc us();
}

if(document.getElementById('iView').contentWindow. document.queryCommandEnabled(command)){

document.getElementById('iView').contentWindow.doc ument.execCommand(command,
false, color);
}else{

alert("queryCommandEnabled("+command+") returned false. Cannot set color
to "+color);
// close palette before exiting function
document.getElementById(elem).style.visibility='hi dden';
return false;
}
document.getElementById('iView').contentWindow.foc us();
document.getElementById(elem).style.visibility='hi dden';
return true;
}

TIA

--
Justin Koivisto - sp**@koivi.com
PHP POSTERS: Please use comp.lang.php for PHP related questions,
alt.php* groups are not recommended.

Jul 20 '05 #1
Share this Question
Share on Google+
12 Replies


P: n/a
I'm not sure what your exact problem is, but you might wish to incorporate
some of this type of logic to prevent errors on obscure browser versions and
variations, Macs and the like...: Good client-side script should never
reference a browser by name.

<html>
<head>
<script language="javascript">
function test() {
if (frames.length && frames['iView'] && frames['iView'].document &&
frames['iView'].document.queryCommandEnabled) {
alert(frames['iView'].document.queryCommandEnabled("forecolor"))
}
else
if (document.getElementById &&
document.getElementById('iView').contentWindow &&
document.getElementById('iView').contentWindow.que ryCommandEnabled)

alert(document.getElementById('iView').contentWind ow.document.queryCommandEn
abled("forecolor"))
else
alert("Browser cannot handle scripted editing!")
}
onload = test;
</script>
</head>
<body>
<iframe id="iView" name="iView" src="test.html"></iframe>
</body>
</html>


Jul 20 '05 #2

P: n/a
"Nobody" <no**@nope.net> writes:
Good client-side script should never reference a browser by name.


I'll have to disagree on that.

While I advocate writing to the standards, some pages also have to
support browsers where the standards based methods won't work
(typically NS4 or IE4).

For such pages, I prefer detecting the browser specifically and make
exceptions for it. There is no absolutely safe method of detecting the
browser (some of the lie), but checking for the name is better than
many other checks.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #3

P: n/a

"Lasse Reichstein Nielsen" <lr*@hotpop.com> wrote in message
news:k7**********@hotpop.com...
| "Nobody" <no**@nope.net> writes:
|
| > Good client-side script should never reference a browser by name.
|
| I'll have to disagree on that.
|
| While I advocate writing to the standards, some pages also have to
| support browsers where the standards based methods won't work
| (typically NS4 or IE4).

NS4 is very easy. document.layers

IE$ is document.all && !document.getElementByID (sp?)

IE4 typically needs no extra coding. NS4 should be supported by very
low-level scripts (typically wrappers for finding and positioning elements.)

|
| For such pages, I prefer detecting the browser specifically and make
| exceptions for it. There is no absolutely safe method of detecting the
| browser (some of the lie), but checking for the name is better than
| many other checks.
|
| /L
| --
| Lasse Reichstein Nielsen - lr*@hotpop.com
| Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
| 'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #4

P: n/a
Justin Koivisto wrote:
I am having a problem with Internet Explorer and javascript on a WYSIWYG
editor I am creating. It all works in Mozilla, but IE returns flase for
queryCommandEnabled('forecol'). JS isn't my strong suit, so I am turning
to all you experts for help. What am I missing here? Other commands like
formatblock, fontsize and fontname all work fine, so I assume that it
has something to do with not getting the correct selection because of
the iframe. Any help is greatly appreciated.


Hopefully this will help get some input on the problem - here is a URL
to view it all:
http://waf.rangenet.com/test/WYSIWYG-Editor/

As far as I can tell, this is the last piece of the puzzle for me to get
it into the CMS that I am developing. Everything works fine in Mozilla
(and what I've tested thus far in NS6+), but the color issue isn't
working with IE. Everything for this project was going quite smoothly
for not doing JS before, but this part is really getting to me (I've let
it sit for a couple months and am just getting back to it now).

Also, any pointers on how to create tables in IE as done in Mozilla
would be quite helpful as well. TIA!

--
Justin Koivisto - sp**@koivi.com
PHP POSTERS: Please use comp.lang.php for PHP related questions,
alt.php* groups are not recommended.

Jul 20 '05 #5

P: n/a
"Nobody" <no**@nope.net> writes:
NS4 is very easy. document.layers
OmniWeb.
<URL:http://www.omnigroup.com/mailman/archive/omniweb-l/2002-June/007067.html>
IE$ is document.all && !document.getElementByID (sp?)
That might be unique (since hopefully no new browser will ever be made
without getElementById).
IE4 typically needs no extra coding. NS4 should be supported by very
low-level scripts (typically wrappers for finding and positioning elements.)


IE 4 lacks a few features that I use often in Javascript (e.g.,
functional arguments to setTimeout/setInterval and to String.replace)
as well as a standards compliant rendering mode.
Ofcourse, the Javascript part can be fixed it with wrappers too.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #6

P: n/a

"Lasse Reichstein Nielsen" <lr*@hotpop.com> wrote in message
news:n0**********@hotpop.com...
| "Nobody" <no**@nope.net> writes:
|
| > NS4 is very easy. document.layers
|
| OmniWeb.
|
<URL:http://www.omnigroup.com/mailman/arc...une/007067.htm
l>

Thanks. What are those jerks doing? What is the more specific solution to
weed them out of the equation? Create a test layer and see if it actually
has properties?

|
| > IE$ is document.all && !document.getElementByID (sp?)
|
| That might be unique (since hopefully no new browser will ever be made
| without getElementById).

Lets hope!

|
| > IE4 typically needs no extra coding. NS4 should be supported by very
| > low-level scripts (typically wrappers for finding and positioning
elements.)
|
| IE 4 lacks a few features that I use often in Javascript (e.g.,
| functional arguments to setTimeout/setInterval and to String.replace)
| as well as a standards compliant rendering mode.
| Ofcourse, the Javascript part can be fixed it with wrappers too.

Function arguments to setTimeout? Can you elaborate on that one?
String.replace would need a wrapper if you use that.

|
| /L
| --
| Lasse Reichstein Nielsen - lr*@hotpop.com
| Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
| 'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #7

P: n/a
"Nobody" <no**@nope.net> writes:
Thanks. What are those jerks doing? What is the more specific solution to
weed them out of the equation? Create a test layer and see if it actually
has properties?
I would just check for document.getElementById and document.all first
(in that order). If they support either, they will be fine. If not,
then I'll have to rely on document.layers working, and if it doesn't,
it is a doomed browser anyway.
Function arguments to setTimeout? Can you elaborate on that one?
You can use setTimeout in two ways: with a string or a function.
setTimeout("foo=bar;",2000);
or
setTimeout(function(){foo=bar;},2000);

The latter method has several advantages:
- It detects syntax errors early (during parsing, not when the code is run
for the first time);
- I find it easier to separate code and data when the code isn't inside
a string.
- The closure keeps the references to local variables (*much* easier coding!),
while the string is evaluated in the global scope.

Sadly, IE4 only supports the first. The same goes for setInterval.

According to MSDN
(<URL:http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/dhtml_node_entry.asp>)
---
In versions earlier than Microsoft® Internet Explorer 5, the first
argument of setTimeout must be a string. Evaluation of the string is
deferred until the specified interval elapses.
---

String.replace would need a wrapper if you use that.


It doesn't work in IE5.0 either, only in 5.5 and 6.0.

Hmm, in Opera 7, String.prototype.replace is a Javascript function,
not an internal function. I could probably just use that code if I
need it :)

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #8

P: n/a

"Lasse Reichstein Nielsen" <lr*@hotpop.com> wrote in message
news:vf**********@hotpop.com...
| "Nobody" <no**@nope.net> writes:
|
| > Thanks. What are those jerks doing? What is the more specific solution
to
| > weed them out of the equation? Create a test layer and see if it
actually
| > has properties?
|
| I would just check for document.getElementById and document.all first
| (in that order). If they support either, they will be fine. If not,
| then I'll have to rely on document.layers working, and if it doesn't,
| it is a doomed browser anyway.

Makes sense. Doomed browsers indeed.

|
| > Function arguments to setTimeout? Can you elaborate on that one?
|
| You can use setTimeout in two ways: with a string or a function.
| setTimeout("foo=bar;",2000);
| or
| setTimeout(function(){foo=bar;},2000);
|
| The latter method has several advantages:
| - It detects syntax errors early (during parsing, not when the code is run
| for the first time);
| - I find it easier to separate code and data when the code isn't inside
| a string.
| - The closure keeps the references to local variables (*much* easier
coding!),

Bingo was his name-o! That's the one that matters (to me at least.) I'll
keep that in mind for future, but thank goodness that I am not using it
anywhere at present (because I know I don't check for IE4 before setting
timeouts!)

| while the string is evaluated in the global scope.
|
| Sadly, IE4 only supports the first. The same goes for setInterval.

Don't use the latter and can't even remember what it does.

|
| According to MSDN
|
(<URL:http://msdn.microsoft.com/library/de...hop/author/dht
ml/dhtml_node_entry.asp>)
| ---
| In versions earlier than Microsoft® Internet Explorer 5, the first
| argument of setTimeout must be a string. Evaluation of the string is
| deferred until the specified interval elapses.
| ---
|
|
| > String.replace would need a wrapper if you use that.
|
| It doesn't work in IE5.0 either, only in 5.5 and 6.0.

Noted. Can't you check for the existence of the replace method on a string
object (so as to forget the browser versions.)

|
| Hmm, in Opera 7, String.prototype.replace is a Javascript function,
| not an internal function. I could probably just use that code if I
| need it :)

I don't use it on the client side (though I am sure that some of my code
would be made more efficient with it.)

Thanks for your input!

|
| /L
| --
| Lasse Reichstein Nielsen - lr*@hotpop.com
| Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
| 'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #9

P: n/a
On 04 Sep 2003 00:28:21 +0200, Lasse Reichstein Nielsen
<lr*@hotpop.com> wrote:
String.replace would need a wrapper if you use that.


It doesn't work in IE5.0 either, only in 5.5 and 6.0.


That could even fail in IE6 since it's a JS method not a DOM method,
and js version is strictly independant from browser version....

Jim.
--
comp.lang.javascript FAQ - http://jibbering.com/faq/

Jul 20 '05 #10

P: n/a
"Nobody" <no**@nope.net> writes:
Noted. Can't you check for the existence of the replace method on a string
object (so as to forget the browser versions.)


The replace function is there, it's just that the replaceText argument
can't be a function in IE 5.0 or earlier. It works in Netscape 4.

Example of replacing with a function:
---
function reverseString(str) {
return str.split("").reverse().join("");
}
var text = "this becomes a weird text";
var newText = text.replace(/\b\w*\b/g,reverseString);
alert(newText);
---

If using a replaceText string, you can also use, e.g., $1 to refer to
the first matched group. This only works in IE5.5+ too. Before that,
the replace method could only replace with a fixed string.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #11

P: n/a
ji*@jibbering.com (Jim Ley) writes:
That could even fail in IE6 since it's a JS method not a DOM method,
and js version is strictly independant from browser version....


That is a point, but I believe IE 6 includes JScript 5.6. Perhaps you
could install an earler version of JScript, but I am not sure.

<URL:http://msdn.microsoft.com/library/default.asp?url=/library/en-us/script56/html/js56jsoriversioninformation.asp>

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #12

P: n/a
On 04 Sep 2003 01:27:32 +0200, Lasse Reichstein Nielsen
<lr*@hotpop.com> wrote:
ji*@jibbering.com (Jim Ley) writes:
That could even fail in IE6 since it's a JS method not a DOM method,
and js version is strictly independant from browser version....


That is a point, but I believe IE 6 includes JScript 5.6.


Oh in reality the chances are very slim, some sort of install problem
whereby jscript.dll couldn't be written is about the only option,
that's not an intentional attempt, not likely ay all, that's what I
was intending to get across with the "strictly" did a very bad job
though. Sorry.

Hun.
--
comp.lang.javascript FAQ - http://jibbering.com/faq/

Jul 20 '05 #13

This discussion thread is closed

Replies have been disabled for this discussion.