Opened 3 years ago

Last modified 2 years ago

#16796 confirmed Bug

Plugin TableTools in combination with inline editor breaks out of editable element

Reported by: mei3r Owned by:
Priority: Normal Milestone:
Component: Core : Tables Version: 4.6.2
Keywords: Cc:

Description

Steps to reproduce

  1. Use inline editor with plugin Tabletools IN a table
  2. Use the editor tools to insert a table with TH (both in rows and columns)
  3. Use the context menue on the leftmost column to add another column on the left

Sample HTML structure after step 2:

<table>
  <tbody>
    <tr>
      <td>
        <div id="editor1" contenteditable="true">
          <table border="1" cellspacing="1" cellpadding="1" style="width: 500px;">
            <thead>
              <tr>
                <th scope="row"><br></th>
                <th scope="col"><br></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row"><br></th>
                <td><br></td>
              </tr>
            </tbody>
          </table>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Expected result

There should be another column before the TH column (in the editable area).

Actual result

There is another column outside the editable area.

Other details (browser, OS, CKEditor version, installed plugins)

This problem applies to other settings also. For example the alignment of a TH cell is instead set on the first TD cell outside the editor.

Problematic Code

https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/tabletools/plugin.js#L33

var nearestCell = startNode.getAscendant( 'td', true ) || startNode.getAscendant( 'th', true );

When startNode is a TH getAscendant() will only find the TD outside the Editor and not even execute the second part of the condition. You either have to check whether nearestCell ist an element in the editor or search for both (TD and TH) and use the nearest of both.

The same applies to https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/tabletools/plugin.js#L50

var parent = node.getAscendant( 'td', true ) || node.getAscendant( 'th', true );

Change History (2)

comment:1 Changed 2 years ago by kkrzton

Status: newconfirmed

Confirmed with CKEditor 4.6.2 on Chrome 55.

comment:2 Changed 2 years ago by Jakub Ś

Keywords: table tabletool inline removed
Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy