ckeditor
Support for table alignment when copying from Word
📝 Provide detailed reproduction steps (if any)
- In a Word document, create a table and left-align it
- Copy the table and paste it into CK Editor
✔️ Expected result
The table should stay left-aligned in CK Editor.
❌ Actual result
The table was centre-aligned.
📃 Other details
The issue can be reproduced here: https://ckeditor.com/docs/ckeditor5/latest/features/pasting/paste-from-word.html
If you'd like to see this fixed sooner, add a 👍 reaction to this post.
Hello. Thank you for the report. I can confirm that table alignment is not kept when copying from Word. It is not supported yet by PasteFromOffice plugin. I'm converting this issue to feature request.
In the meantime you can change table alignment manually using Table properties button after selecting the table. This feature is available after installing TableProperties plugin.
MS Word pastes following markup:
<div align=right>
<table class=MsoTableGrid border=1 cellspacing=0 cellpadding=0
style='border-collapse:collapse;border:none;mso-border-alt:solid windowtext .5pt;
mso-yfti-tbllook:1184;mso-padding-alt:0in 5.4pt 0in 5.4pt'>
<tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes'>
<td width=138 valign=top style='width:103.25pt;border:solid windowtext 1.0pt;
mso-border-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt'>
<p class=MsoNormal style='margin-bottom:0in;line-height:normal'><o:p> </o:p></p>
</td>
<td width=150 valign=top style='width:112.5pt;border:solid windowtext 1.0pt;
border-left:none;mso-border-left-alt:solid windowtext .5pt;mso-border-alt:
solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt'>
<p class=MsoNormal style='margin-bottom:0in;line-height:normal'><o:p> </o:p></p>
</td>
</tr>
<tr style='mso-yfti-irow:1;mso-yfti-lastrow:yes'>
<td width=138 valign=top style='width:103.25pt;border:solid windowtext 1.0pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;mso-border-alt:solid windowtext .5pt;
padding:0in 5.4pt 0in 5.4pt'>
<p class=MsoNormal style='margin-bottom:0in;line-height:normal'><o:p> </o:p></p>
</td>
<td width=150 valign=top style='width:112.5pt;border-top:none;border-left:
none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
mso-border-alt:solid windowtext .5pt;padding:0in 5.4pt 0in 5.4pt'>
<p class=MsoNormal style='margin-bottom:0in;line-height:normal'><o:p> </o:p></p>
</td>
</tr>
</table>
</div>
Also, please check out the configuration we're supporting for table properties https://ckeditor.com/docs/ckeditor5/latest/api/module_table_tableconfig-TablePropertiesConfig.html#member-defaultProperties (https://ckeditor.com/docs/ckeditor5/latest/api/module_table_tableconfig-TablePropertiesOptions.html). This must be taken into account.
Okay, so it's look like MS Word treat left alignment as default. So in case with center and right alignment we have helpful div with alignment attribute here:
In case with left alignment we do not have this div unfortunately
It's make sense because when you insert table in word, by default it has left alignment.
I suggest to handle this case in this way: if table has not defined any alignment it means it's left and add this by ourself, what do you think? @mlewand @oleq @Dumluregn @pszczesniak
As i can see is exactly like you wrote @illia-stv . When table has no parent div it means that it's left aligned.
Language direction doesn't matter. Attribute dir=RTL is set on all paragraphs, hX and so on but not on tables (only on tags inside cells like <p>). Tags <body> and <html> are also without dir attribute.
Example (a part) clipboard HTML from Word document with set RTL text direction and table is aligned to left (in Word no alignment means left alignment regardless of which text direction is set):
<p class=MsoNormal dir=RTL style='text-align:right;direction:rtl;unicode-bidi:
embed'><span lang=EN-GB dir=LTR><o:p> </o:p></span></p>
<table class=MsoNormalTable border=1 cellspacing=0 cellpadding=0
style='margin-left:.9pt;border-collapse:collapse;border:none;mso-border-alt:
solid windowtext .5pt;mso-padding-alt:0cm 5.4pt 0cm 5.4pt;mso-border-insideh:
.5pt solid windowtext;mso-border-insidev:.5pt solid windowtext'>
<tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes;height:47.8pt'>
<td width=104 valign=top style='width:77.7pt;border:solid windowtext 1.0pt;
mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:47.8pt'>
<p class=MsoNormal dir=RTL style='text-align:right;direction:rtl;unicode-bidi:
embed'><span lang=EN-GB dir=LTR><o:p> </o:p></span></p>
</td>
<td width=119 valign=top style='width:89.1pt;border:solid windowtext 1.0pt;
border-left:none;mso-border-left-alt:solid windowtext .5pt;mso-border-alt:
solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:47.8pt'>
<p class=MsoNormal dir=RTL style='text-align:right;direction:rtl;unicode-bidi:
embed'><span lang=EN-GB dir=LTR><o:p> </o:p></span></p>
</td>
</tr>
<tr style='mso-yfti-irow:1;mso-yfti-lastrow:yes;height:47.75pt'>
<td width=104 valign=top style='width:77.7pt;border:solid windowtext 1.0pt;
border-top:none;mso-border-top-alt:solid windowtext .5pt;mso-border-alt:solid windowtext .5pt;
padding:0cm 5.4pt 0cm 5.4pt;height:47.75pt'>
<p class=MsoNormal dir=RTL style='text-align:right;direction:rtl;unicode-bidi:
embed'><span lang=EN-GB dir=LTR><o:p> </o:p></span></p>
</td>
<td width=119 valign=top style='width:89.1pt;border-top:none;border-left:
none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:47.75pt'>
<p class=MsoNormal dir=RTL style='text-align:right;direction:rtl;unicode-bidi:
embed'><span lang=EN-GB dir=LTR><o:p> </o:p></span></p>
</td>
</tr>
</table>
Fortunately in case with RTL, MS Word wrap table in div with alignment attribute each alignment option(left, center, right)
HTML in Clipboard
In MS Word
In CKE5
Unfortunately we found another problem which is on the master at the moment. As you see when you copy table from MS Word and paste it to RTL in CKE5 there is no right board in the table.
That's great news that MS Word adds explicitly alignment in case of RTL langs!
So to sum it up, we need handlings for pasting from MS Word listed below.
When there's a table pasted from Word:
- that has no parent
div[align]element, it should be aligned to the left. - that has a parent
div[align=center]element, then the model'stableelement should gettableAlignmentattribute set tononeper this line. - that has a parent element
div[align=left]ordiv[align=right]then the model'stableelement should gettableAlignmentset toleftorright.
There are multiple ways table would be aligned in editors.
One is by adding align attribute to the parent div.
Other by using display: flex and justify-content: flex-end; or center. For example, One Drive Word generates this.
Just a quick update regarding this request.
Starting from CKEditor 5 v47.3.0, new experimental table block-alignment options are available. These options introduce left and right table alignment without text wrapping, effectively covering the main needs described in this issue.
To try them out:
- Enable:
config.experimentalFlags.useExtendedTableBlockAlignment - Load the experimental UI plugins:
TablePropertiesUIExperimentalandTableCellPropertiesUIExperimental
Details: https://ckeditor.com/docs/ckeditor5/latest/updating/guides/update-to-47.html#new-experimental-options
These improvements resolve the table-style limitations mentioned here (and other issues). The new behavior is planned to become the default in version 48.0.0 (~April).
