Opened 7 years ago

Closed 7 years ago

#16811 closed Bug (fixed)

No table align when pasted from Word

Reported by: Marek Lewandowski Owned by: Marek Lewandowski
Priority: Nice to have (we want to work on it) Milestone: CKEditor 4.7.0
Component: General Version: 4.6.0
Keywords: Cc:

Description (last modified by Marek Lewandowski)

Steps to reproduce

  1. Open attached Table_alignment.docx document in Word.
  2. Copy it's content.
  3. Paste into a full featured editor.

Expected result

Tables are aligned as in the docx document.

Actual result

Alignments are stripped.

More details

It looks in Word pretty much like this:

https://i.imgur.com/OdLhLi5.png

The problem is that Word generates following markup:

<div align=right>

<table class=MsoTableGrid border=1 cellspacing=0 cellpadding=0 style='(...)'>
 <tr style='(...)'>
 	(...)
 </tr>
</table>

</div>

Which displays it correctly, but uses deprecated align attribute.

We have a style transformation in core which transforms any align into float CSS prop, which is fine for elements like table, img, iframe, but it's wrong for div and p. Becasue for div and p it defines the alignment of content elements within this element.

It's also worth to remember that align is a little more aggresive than text-align CSS prop, as it affects anything, whereas for text-align you need to apply margin: x auto for block-alike elements, otherwise they won't be aligned.

Attachments (1)

Table_alignment.docx (11.4 KB) - added by Marek Lewandowski 7 years ago.

Download all attachments as: .zip

Change History (9)

Changed 7 years ago by Marek Lewandowski

Attachment: Table_alignment.docx added

comment:1 Changed 7 years ago by Marek Lewandowski

Status: newconfirmed

comment:2 Changed 7 years ago by Marek Lewandowski

Description: modified (diff)

comment:3 Changed 7 years ago by Marek Lewandowski

We can't convert it to float alone as it would allow for wrapping text around the table.

My through here is to go with simplest possible option, so let for div[align] where that's necessary.

comment:4 Changed 7 years ago by Olek Nowodziński

Priority: NormalMust have (possibly next milestone)

TBH, I'd go with the simplest solution which is possible to implement.

  1. Is it possible to just wrap a table into <div overflow:hidden> and <table float:right>? When the user changes alignment to left, or anything else, the algorithm would discover that <div> (one child (table) && one attribute (style) && one value (ov:hidden)) and remove it or take care of it so the new structure reflects the needs of the alignment?
  1. Is <table float: right; clear: both;> an option? Would it work?
  1. It sounds like a use nice case for widgets: magical alignment old align in the V(editing)-layer and floats/wrappers in the editor output (model)–layer. WDYT?

comment:5 Changed 7 years ago by Marek Lewandowski

Thanks for the thoughts @a.nowodzinski.

Out of curiosity checked approach 2. and without overflow:hidden it doesn't consume vertical space: http://codepen.io/mlewand/pen/OWgJbp

We've had a lot of discussion on this, and we came to conclusion that in fact we can't create a markup that we don't support in editor. Look at div[align] if we implement it, the end user has now way to control it's alignment. That doesn't make sense. Instead we'll provide a handling that is as close to expected as it could be, which means to align the table itself to a given position, so that it can be changed using tabletools dialog.

Last edited 7 years ago by Marek Lewandowski (previous) (diff)

comment:6 Changed 7 years ago by Marek Lewandowski

Priority: Must have (possibly next milestone)Nice to have (we want to work on it)

comment:7 Changed 7 years ago by Marek Lewandowski

Owner: set to Marek Lewandowski
Status: confirmedreview

Pushed to branch:t/16811.

comment:8 Changed 7 years ago by Tade0

Resolution: fixed
Status: reviewclosed

Overall the fix looks good to me, especially that the alternative method - using replaceWithChildren - is notorious for not cooperating with the filter.

Fixed with git:eec0816d9fa4de4fde716a288c99394893064194

Note: See TracTickets for help on using tickets.
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy