CKEditor Integration
  1. CKEditor Integration
  2. CKEDITOR-73

CKEditor is not center-aligning table that's copied from a Word file where it is center-aligned

    Details

    • Type: Bug Bug
    • Status: Closed Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 1.6.1
    • Fix Version/s: 1.12
    • Labels:
      None
    • Similar issues:

      Description

      See the attached word-file. It's a copy-paste of 'Apollo-11' article from Wikipedia.

      There's a center-aligned table. When you copy-paste it in the CKEditor, the table displays as center-aligned in the WYSIWYG editor, which is great!

      But as soon as you save the page or preview, it gets left aligned.

      Looking a bit closer, the styles of the table when displayed in WYSIWYG mode and when in save/preview mode appear slightly different, which seems unexpected. In WYSIWYG mode, there's an attribute 'align:center' applied on the table element. In Save/Preview mode, that attribute is no longer displayed but got replaced with 'text-align:center' within the style tag.

      The problem also is that there appears to be no other way to center-align the table, so the user is kind of stuck in WYSIWYG mode. If you know of a short-term fix to make the table center-align, then that'll be great so we can tell our other users about it.

      I also tried this syntax as prescribed in the XWiki Syntax guide (http://lod.springer.com/wiki/bin/view/XWiki/XWikiSyntax) but that did not center-align the table:

      (% style="background-color:red;align=centerl;width:25%" %)
      |=Title 1|=(% style="background-color:yellow" %)Title 2
      |Word 1|Word 2
      
      1. Wiki UAT Word Exercise-4.docx
        19 kB
        Chetan Kumar
      1. add table.png
        87 kB
      2. CKEditorTableCenter.jpg
        17 kB
      3. edit_mode.png
        68 kB
      4. view_mode.png
        101 kB

        Issue Links

          Activity

          Hide
          Marius Dumitru Florea added a comment - - edited

          There are three issues here:

          1. CKEditor's table plugin is using the deprecated align attribute.
          2. XWiki's AttributeFilter (used by the HTMLCleaner) wrongly replaces the deprecated align attribute with the text-align style. It should use style="margin-left: auto; margin-right: auto" instead for table elements.
            (% style="margin-left: auto; margin-right: auto" %)
            |One|Two
            
          3. Switch to source doesn't clean the HTML content (on the server) before the conversion, while the save action does. For instance AttributeFilter is not called when you switch to source.
          Show
          Marius Dumitru Florea added a comment - - edited There are three issues here: CKEditor's table plugin is using the deprecated align attribute. XWiki's AttributeFilter (used by the HTMLCleaner ) wrongly replaces the deprecated align attribute with the text-align style. It should use style="margin-left: auto; margin-right: auto" instead for table elements. (% style="margin-left: auto; margin-right: auto" %) |One|Two Switch to source doesn't clean the HTML content (on the server) before the conversion, while the save action does. For instance AttributeFilter is not called when you switch to source.
          Hide
          Buzila Vlad added a comment - - edited

          When table is align left in edit mode the table shows one way and when it is in saved/view mode the table shows in other way . See attach for edit mode and for saved/view mode .
          In edit mode source view shows :

          (% align="left" style="height:20px;width:40px;" %)
          

          after saved/view mode source view shows:

          (% style="height:20px;width:40px;text-align:left" %)
          
          Show
          Buzila Vlad added a comment - - edited When table is align left in edit mode the table shows one way and when it is in saved/view mode the table shows in other way . See attach for edit mode and for saved/view mode . In edit mode source view shows : (% align= "left" style= "height:20px;width:40px;" %) after saved/view mode source view shows: (% style= "height:20px;width:40px;text-align:left" %)
          Hide
          Gabriela Anechitoaei added a comment - - edited

          Same issue for 8.4.1, used IE10 - neither right or center work as supposed in the Save/View mode, when choosing the Alignment of the table then pressing Save & View.

          What I've noticed tough is that if I do this steps the table is aligned as expected (see "CKEditorTableCenter" image attached):
          1. Choose the desired alignment (e.g. right, center)
          2. Click on the "Source" page
          3. Observe the code (e.g. (% align="center" style="width: 500px; height: 300px;" %) )
          4. Press Save & View while on the "Source" page

          Now, if I go back again in the Source page, the code remains unchanged (% align="center" style="width: 500px; height: 300px;" %)

          Show
          Gabriela Anechitoaei added a comment - - edited Same issue for 8.4.1, used IE10 - neither right or center work as supposed in the Save/View mode, when choosing the Alignment of the table then pressing Save & View. What I've noticed tough is that if I do this steps the table is aligned as expected (see "CKEditorTableCenter" image attached): 1. Choose the desired alignment (e.g. right, center) 2. Click on the "Source" page 3. Observe the code (e.g. (% align="center" style="width: 500px; height: 300px;" %) ) 4. Press Save & View while on the "Source" page Now, if I go back again in the Source page, the code remains unchanged (% align="center" style="width: 500px; height: 300px;" %)
          Hide
          Marius Dumitru Florea added a comment -

          Even if the align table attribute is deprecated it is still supported by all browsers. The alternative, margin-left:auto;margin-right:auto, is less supported it seems, which is the reason CKEditor still uses the align attribute instead. I will modify the AttributeFilter to keep the align attribute for table elements.

          Another option is to use the styles drop down but it is less intuitive for the user.

          Show
          Marius Dumitru Florea added a comment - Even if the align table attribute is deprecated it is still supported by all browsers. The alternative, margin-left:auto;margin-right:auto , is less supported it seems, which is the reason CKEditor still uses the align attribute instead. I will modify the AttributeFilter to keep the align attribute for table elements. Another option is to use the styles drop down but it is less intuitive for the user.
          Hide
          Marius Dumitru Florea added a comment - - edited

          In the end I chose to fix the issue on the CKEditor side in order to cover a larger user base, by converting the align attribute to the margin:auto style before the content is saved.

          Show
          Marius Dumitru Florea added a comment - - edited In the end I chose to fix the issue on the CKEditor side in order to cover a larger user base, by converting the align attribute to the margin:auto style before the content is saved.

            People

            • Assignee:
              Marius Dumitru Florea
              Reporter:
              Chetan Kumar
            • Votes:
              0 Vote for this issue
              Watchers:
              4 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:
                Date of First Response: