Refinery backend and IE8

[magpieuk]

At present the backend of refinery does not work in IE8. Numerous script errors and artefacts on screen. e.g. if you press return at the end of a paragraph then the editor tries to nest

tags. hovering over paragraphs gives arrow cursor suggesting the ability to drag paragraphs around.

I had a look at the latest wymeditor and the examples provided with it however this does not present the same issues.

[magpieuk]

The following wymeditor works fine in IE8. (http://files.wymeditor.org/wymeditor/trunk/src/examples/06-custom-menu.html) so I guess its something in the way that refinery is implementing it.

[magpieuk]

I have been looking at this today and wanted to let you guys know what
I have found so far.

One of the problems seems to be with the way the wym iframe is
rendered, I downloaded the latest wymeditor from the http://www.wymeditor.org/
site and dropped in the iframe directory into the public/javascripts/
wymeditor directory and then altered the iframeBasePath in the
boot_wym.js file to

iframeBasePath: '/javascripts/wymeditor/iframe/default/'

The artifacts in IE8 ( dragable handles etc ) then vanish and the
editor then starts behaving better.

In the public\stylesheets\refinery\thickbox.css stylesheet add a width
to the #TB_window otherwise you get narrow dialog boxes.

#TB_window {
        font: 12px Arial, Helvetica, sans-serif;
        color: #333333;
        width: 940px;

}

So thats the good news, the bad news is that some of the buttons and
dialogs now dont work.

Things that work:

Bold
Italic
Create Link
Remove Link
Insert Table
HTML View

Things that sort of work

H1, H2, H3, P and OL UL Lists work of you first highlight some text.
This is different to the non refinery wymeditor in IE8 (http://
files.wymeditor.org/wymeditor/trunk/src/examples/08-custom-
panel.html#) which just seems to work. This does seem to be a bit
flaky though compared to the normal wymeditor.

Things that don't work

Insert Image:

Line 488 admin.js
    if ((selected_image = $('#existing_image_area_content ul
li.selected img')).length > 0) {
      image_dialog.set_image(selected_image.first());
    }

Errors with "Object does not support property or method". I think the
problem with this is that there are no li.selected items so therefore
you cant ask its length.

Image upload works from the form though, but you still cant insert teh
image.

Philip, can you please let me know what changes you guys made to the
wymeditor so I can see if I can work out what is going on? I think it
the problems must be coming from the refinery additions as the basic
wymeditor works fine in IE8.

But we are little closer now. Can anyone help take this forward?

Regards

Lee

[magpieuk]

I have just compared the iframe in refinery with the one std in wymeditor and the thing thats hits you is that the std one has

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

in it. Think this will help but probably wont fix the javascript issues.

[magpieuk]

I can confirm that with the above line put in under title tag in the /vendor/plugins/refinery/app/views/wymiframe.html.erb then the editor behaves much better, cant believe I did not spot that before.

Javascripts still problematic though.

[parndt]

aha! they've hacked it! Well maybe we should do this too... do you want to patch and I'll pull in the change? IE8 is beyond a joke..

[magpieuk]

Philip,

There are still problems with the editor in IE8 in that the refinery version is different somehow to the normal one. I will hopefully be able to look at this again at the weekend.

[parndt]

Ok thanks for your work toward this. The wymeditor we use has been modified quite a bit to use the dialogues and our own image insert link insert etc.

[magpieuk]

Philip,

My understanding from looking at the code was that the modifications to the dialogues etc are in the boot_wym.js file which is external to the wymeditor Have you made any changes to the wymeditor? I ask because it has been renamed jquery.refinery.wmeditor.js. If not I will try updating it to the latest one from the wymeditor site and see where we go from there.

[parndt]

It has extensive modifications.. It became necessary. That is why it's renamed .refinery

[parndt]

I made some improvements several commits ago that should mean IE8's looking somewhat better, but still not perfect. Just got so garbled..

[ygor]

What is the status on this? When I look in IE8 then the editor still has problems...

[magpieuk]

Yup the problems still exist, have not had time yet to look in more detail but it is still on my todo list. You able to help?

[parndt]

I've updated Refinery to the latest wymeditor (rc1 + patches) in the current trunk HEAD on git. So you may want to update and test :)

See commit: http://github.com/resolve/refinerycms/commit/2422358311f24b75f8a1f074bcf2c11d2a4fcc4d

[magpieuk]

Great news. I think I was going to struggle to work out all the mods you had made. But I will give a test. Thanks!

[parndt]

How are the results?

[ygor]

Hi parndt, it's already a lot better, but not fully working yet. It shows a js error when pressing cancel after opening up the image dialog or table dialog. I'll try to be more specific lateron...

[parndt]

Thanks!

[parndt]

I've forced it to be IE7 compatibility mode, so just switch it off when you want to test.
WYMeditor no longer dies in production mode on IE, turns out that was just CSS caching killing it.... so now we don't let IE have that until we can provide a better resolution.

[parndt]

I'm closing this issue but please reopen if you have more / remaining issues with IE8