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 时，我可以正常切换两个可编辑字段。在文档中，我看到这method似乎做了我需要的事情。因此，当按下 Enter 键时，我这样做是为了关注下一个元素，但事件似乎什么也没做：

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

    if(keycode == 13) {
        activeElement.focusNext();
    }

});

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

Answer 1

您的功能几乎准备好了。 element.focusNext函数利用tabindex DOM元素属性在可聚焦元素之间切换。您应该将此属性添加到输出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();
   }
} );

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

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

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

1 个答案: