Question

我点击“史密斯”文字

上的表格

<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'旁边）。

但我想在corespondent行中创建第一个小部件。

输出应该是这样的：

<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。我已经这样做了，以防止选择在一些粗体，链接，强调文本中的情况。因此，父母不必是td。您可以在文档中找到更多元素方法：https://docs.ckeditor.com/ckeditor4/latest/api

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

1 个答案: