模拟在 CKEditor 小部件中按下另一个键时的 Tab 键按下

Question

我正在开发一个简单的CKEditor小部件，它有一个带有一些可编辑字段的表格，并使用这些值进行计算。当我向用户展示它时，他要求他使用Enter键而不是Tab键更改字段。

基本上，这是小部件结构的示例(我需要将div放在可编辑的表格单元格中，因为我无法在插件初始化时使单元格本身可编辑(：

'<div id="widget-wrapper">' +
'<table>' +
'<tr>' +
'<td> Altura:</td>' +
'<td><div id="altura" class="edt single-line editable1"> </div> </td>' +
'<td> cm</td>' +
'</tr>' +
'<tr>' +
'<td> Peso:</td>' +
'<td><div id="peso" class="edt single-line editable2"> </div> </td>' +
'<td> kg</td>' +
'</tr>' +
'</table>' +
</div>

当我按Tab键时，我可以正常切换两个可编辑字段。在文档中，我看到了这种方法似乎可以满足我的需要。因此，我这样做是为了在按下Enter键时聚焦下一个元素，但该事件似乎没有任何作用：

editor.on( 'key', function( event ) {
activeElement = editor.document.getActive();
keycode = event.data.keyCode;
if(keycode == 13) {
activeElement.focusNext();
}
});

还有其他方法可以满足我的需要吗？

Answer 1

您的功能几乎准备就绪。element.focusNext函数利用tabindexDOM 元素属性在可聚焦元素之间切换。您应该将此属性添加到输出 HTML 中。另外，不要忘记在 ACF 中启用此属性，否则它将被删除。

<div id="widget-wrapper">
<table>
<tr>
<td> Altura:</td>
<td><div id="altura" class="edt single-line editable1" tabindex="1"> </div> </td>
<td> cm</td>
</tr>
<tr>
<td> Peso:</td>
<td><div id="peso" class="edt single-line editable2" tabindex="2"> </div> </td>
<td> kg</td>
</tr>
</table>
</div>

另外，我认为取消输入事件是个好主意，这样它就不会在可编辑的焦点更改上添加新行。

config.allowedContent = 'div(editable1,editable2)[tabindex]';
CKEDITOR.replace( 'editor', config );
editor.on( 'key', function( event ) {
activeElement = editor.document.getActive();
keycode = event.data.keyCode;
if( keycode == 13 ) {
activeElement.focusNext();
event.cancel();
}
} );

请注意，弄乱 enter 键事件会产生一个重要问题 - 您的用户将无法在可编辑字段中创建新行。

请参阅工作示例 https://codepen.io/jacekbogdanski/pen/ERNmEj