[Editor] Exec commands not working reliably in YUI RTE with content editable

yui / yui3

A library for building richly interactive web applications.

http://yuilibrary.com/

Other

4.12k stars 1.29k forks source link

[Editor] Exec commands not working reliably in YUI RTE with content editable #1202

Open ankitshah2787 opened 11 years ago

ankitshah2787 commented 11 years ago

Bold, Italics, Underline do not work reliably in IE browsers. They work the first time and after that it stops responding. Reproducible on all IE browsers. On other browsers it works fine.

ipeychev commented 11 years ago

Could you provide reproducible test, please?

apipkin commented 11 years ago

@ipeychev I think this may have something to do with some strange dependancies. Exec-command requires frame. Should this be in there, or was this left over?

apipkin commented 11 years ago

@ipeychev looking into this deeper. It seems that IE is adding a second line break where the cursor is placed. I am working to create a reproduction of this. But it seems that the cursor is being placed outside of the context but inside of the editor. Is this possible?

ipeychev commented 11 years ago

@apipkin

Exec-command requires frame. Should this be in there, or was this left over?

We left it there for backward compatibility reasons, similarly to the way editor-base still requires frame. The idea was to clean this up until "ContentEditable has been in at least one full release".

apipkin commented 11 years ago

Awesome, as long as it was thought about :) any idea about the second line going into the container in IE?

ipeychev commented 11 years ago

@apipkin

looking into this deeper. It seems that IE is adding a second line break where the cursor is placed. I am working to create a reproduction of this.

This one seems odd, as soon as you have it, will take a look. Is it the same when Frame is used?

But it seems that the cursor is being placed outside of the context but inside of the editor. Is this possible?

Sorry, I'm not sure I understood, what do you mean with "being placed outside the context"?

ipeychev commented 11 years ago

Haha, maybe not clean this up "until ContentEditable has been in at least one full release", but "when"? It is 5:30 a.m. here, I'm still sleeping :)

apipkin commented 11 years ago

@ipeychev I was able to get a small repro up and running. http://jsbin.com/oZovIba/1/edit

In (my) chrome it only renders one line. In IE10 it renders two lines.

Also in chrome, it does bold. In IE10 it does not bold.

There is a possibility that I do not have the scripting done correctly? but maybe you can fix that if it's user error :)

ipeychev commented 10 years ago

@apipkin

Okay, I have it. Bold and italic commands work fine in all IE browsers too. The problem is in the CSS reset stylesheet added on the page. View the source of this page: http://jsbin.com/oZovIba/1

There is:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.11.0/build/cssreset/cssreset-min.css">

In IE, executing "bold" command makes a "strong" element, like this:

<strong>This text should be made bold</strong>

However, in the other browsers, "bold" command produces something else, for example a "span" element with styling:

<span style="font-weight: bold;">This text should be made bold</span>

Adding CSS Reset stylesheet removes the styling for the "strong" element, see here: https://github.com/yui/yui3/blob/master/src/cssreset/css/cssreset.css#L61

and since we are working without iframe, resetting the default styling of "strong" element causes this issue. This "bug" wouldn't happen, if we were using an iframe, because the CSS in the editor would be isolated.

ipeychev commented 10 years ago

@apipkin

Also, as I see the default example page in editor's folder contains this CSS reset stylesheet. What if we remove and replace it with normalize CSS instead?

apipkin commented 10 years ago

We can't replace the whole style for the example page. What about the new line showing up in IE but not in Chrome? Any thoughts on that one? I'll update the JSBin with styles and see if I can "correct" the reset.

ipeychev commented 10 years ago

We can't replace the whole style for the example page.

Could you please explain why?

I meant one of these:

Adding Normalize CSS in addition to CSS Reset or
Removing CSS Reset

About the two lines, this is an old issue. It happens not only in IE10, but in all IE browsers. It happens using iframe too. It is not related to the Editor. Look on the following snippet:

<!DOCTYPE html>

<head>
</head>

<body>

<div style="border:1px solid blue;" contenteditable="true"><br></div>

</body>

</html>

Removing this br element produces the expecting result. The other browsers just ignore it, and the element doesn't look like it has two lines instead one. This comes from editor-base. We can prevent adding such br element in IE. @davglass should know more and if this is recommendable.

@apipkin

apipkin commented 10 years ago

Changing the main styles would require changing them for the whole site. We can add new styles for the example page though