Avoid deprecated image attributes

[mike890]

The latest build of FCK 3.0 still generates the deprecated image attributes as align/hspace/vspace. All these attributes has been deprecated for several years already for the xhtml strict mode. They are also deprecated in HTML5.

Maybe the new version of the editor would be the great time to switch to the styles instead of these attributes? Otherwise, the generated HTML cannot pass validation.

[W. Andrew Loe III]

+1

This is very frustrating since we use a comprehensive reset stylesheet that removes all margins and padding to ensure we have full control.

[Frederico Caldeira Knabben]

We must just be sure the editor will remain backwards compatible with content produced in the current way.

[Florian]

Hello

I have written a workaround for using css instead of img tags, but has some restrictions. Please take a look and correct the code.

Important!!!:

• It replaces old hspace, vspace, align automatically.
• You can`t use stylefield in advanced tab any more.

[Garry Yao]

#4631 has been marked as DUP.

[Frederico Caldeira Knabben]

Just for reference, #4631 also included the border handling into the list of things to be changed by this ticket.

[Garry Yao]

Ticket Test added at :
​http://ckeditor.t/tt/4246/1.html. ​http://ckeditor.t/tt/4246/2.html.

[Frederico Caldeira Knabben]

• The border doesn't get removed by simply emptying the border field.

• We should not have two separated options "Align" and "Float". For the eyes of end users, we're always talking about "Align". So, for now, we could reduce the number of alignment options to "Left" and "Right" only. When loading an image with the "align" attribute, we should remove it only if it matches "left" or "right", otherwise we just leave it intact. No vertical alignment should be considered at this moment.

• Actually... it looks like changes are not allowed at all, once you set some styles in the image.

[Garry Yao]

Provide the spec behind the idea of only looking at the short-hand (composed) rule to determinate the inline style is here:

​http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties

[Garry Yao]

Fixing the above mentioned issues.

[Frederico Caldeira Knabben]

• If you set the border or alignment and confirm and then editing it you remove the previously set value, an empty "style" attribute remains in the source.

• The border style has a space before the semicolon (e.g. "border: 1px solid ;" instead of "border: 1px solid;". That's just a small detail, of course.

• The dialog is broken when inserting new images. It works well for existing images only.

• In IE, when editing an image with src only, when loading the dialog the HSpace value is "-1". By cleaning this field and confirming the dialog, "-1" margins get added to the image.

I'm not adding other issues here as it looks like we already have several listed. I think the next patching round must be tested better before putting it under review.

[Garry Yao]

Ticket TCs updated.

[Frederico Caldeira Knabben]

It's working as a charm in Firefox. Still issues in IE though:

• It's not possible to add borders when editing an image that previously had no border.

• It's not possible to remove the borders of images with borders.

[Garry Yao]

The culprit in IE is just onChange is not fired when typing, instead we have 'onKeyUp' now.

[Garry Yao]

The border style has a space before the semicolon (e.g. "border: 1px solid ;" instead of "border: 1px solid;" in Firefox.

A browser issue for me, Firefox is expecting the third component of 'border' short-hand in position, which leave there an empty space.

[Frederico Caldeira Knabben]

With IE:

1. Load the following HTML:

<p><img alt="" src="http://www.google.com/intl/en_ALL/images/logo.gif" style="border-bottom: 5px solid; border-left: 5px solid; border-top: 5px solid; border-right: 5px solid" title="" /></p>

2. Open the dialog for the image.

3. Click the "Reset size" button.

4. Confirm the dialog.

The sizes will not be in the output.

[Frederico Caldeira Knabben]

With IE:

1. Load the following HTML:

<p><img alt="" src="http://www.google.com/intl/en_ALL/images/logo.gif" style="width: 276px; height: 110px" title="" /></p>

2. Open the dialog for the image.

3. Set the width to "100" the height will be automatically set to "40".

4. Confirm the dialog.

The height will not change.

[Garry Yao]

Fixed with [4685] and [4686].

[mimo]

I can confirm that the new version fixes the align= problem. Would it be possible/difficult to add support for replacing the style= with a CSS class for more consistent design (similar to the justifyClasses and indentClasses)? Maybe call it imageAlignClasses...

[Frederico Caldeira Knabben]

Please do no reopen tickets for feature requests.