在 CKEDITOR 中更改新小部件的位置

Question

我点击 'Smith' 文本 table

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
  </tr>
</table>

我调用方法：

var selection = editor.getSelection();
var element = new CKEDITOR.dom.element('span');
editor.insertElement(element);
widget = editor.widget.initOn(element, 'myWidget');

它会在我点击的确切位置（文本 'Smith' 旁边）创建新的小部件。

但我想在相应行的第一个单元格中创建此小部件。

输出应该是这样的：

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
  </tr>
  <tr>
    <td><span>myWidget</span>Jill</td>
    <td>Smith</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
  </tr>
</table>

我怎样才能做到这一点？

Answer 1

您可以将 insertElement 之前的选择移动到您实际希望插入元素的位置。插入元素方法使用当前选择作为插入的地方。为此，您需要创建新范围，将适当的元素添加到范围（如 startNode），使用折叠选择，然后从范围中进行选择。现在您应该在应该插入元素的地方进行选择。

另一个选项（对我来说更方便一点）可能是将 insertElement 替换为将小部件放置在适当位置的方法。它应该像这样工作：

var selection = editor.getSelection();
var element = new CKEDITOR.dom.element( 'span' );
var firstCell = selection.getStartElement().getAscendant( 'tr' ).getFirst();
firstCell.append( element, true );

当然代码只用于表格，因为 tr 在上升节点中搜索。我这样做是为了防止选择出现在一些粗体、链接、强调的文本中。所以 parent 不一定是 td。您可以在文档中找到更多元素方法：https://docs.ckeditor.com/ckeditor4/latest/api

在 CKEDITOR 中更改新小部件的位置

Change position of new widget in CKEDITOR

javascript

ckeditor