IE/Mozilla WYSIWYG editor - problems with IE and queryCommandEnabled

J

Justin Koivisto

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.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=getOffsetLeft(buttonElement)
+ 'px';

document.getElementById(layerid).style.top=(getOffsetTop(buttonElement)
+ buttonElement.offsetHeight) + 'px';
if(document.getElementById(layerid).style.visibility=='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.document.execCommand(command,
false, option);
return true;
}else return false;
}
document.getElementById('iView').contentWindow.focus();
}

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.focus();
}

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

document.getElementById('iView').contentWindow.document.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='hidden';
return false;
}
document.getElementById('iView').contentWindow.focus();
document.getElementById(elem).style.visibility='hidden';
return true;
}

TIA
 
L

Lasse Reichstein Nielsen

Nobody said:
Good client-side script should never reference a browser by name.
Click to expand...

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
 
J

Justin Koivisto

Justin said:
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.
Click to expand...

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!
 
L

Lasse Reichstein Nielsen

Nobody said:
NS4 is very easy. document.layers
Click to expand...

OmniWeb.
IE$ is document.all && !document.getElementByID (sp?)
Click to expand...

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.)
Click to expand...

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
 
L

Lasse Reichstein Nielsen

Nobody said:
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?
Click to expand...

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?
Click to expand...

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.
Click to expand...

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
 
J

Jim Ley

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

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.
 
L

Lasse Reichstein Nielsen

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

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
 
J

Jim Ley

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

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Help with code 0
Image not changing between "mute" & "un-mute" images. 5
How do I fix this issue in sqaurespace code block? 1
I need help making a zooming function 11
Help with my responsive home page 2
IE problem with iframe reload 9
Problems with using event handlers for button and textarea input 1

Members online

No members online now.
Total: 58 (members: 0, guests: 58)
Robots: 362

Forum statistics

Threads
473,994
Messages
2,570,223
Members
46,810
Latest member
Kassie0918

Latest Threads

Top