当在 CKEditor 小部件中按下另一个键时模拟选项卡按键

Question

我正在开发一个简单的 CKEditor 小部件，它有一个 table 和一些 editable 字段，并使用这些值进行计算。当我向用户展示它时，他要求他使用 Enter 键而不是 Tab.

更改字段

基本上，这是小部件结构的示例（我需要将 div 放入 editable table 单元格中，因为我无法使单元格本身成为 editable插件初始化):

    '<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时，我可以正常切换两个editable字段。在文档中，我看到这个 method 似乎可以满足我的需要。所以我这样做是为了在按下 Enter 键时聚焦下一个元素，但事件似乎什么都不做：

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

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

});

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

Answer 1

您的功能几乎可以使用了。 element.focusNext function utilizes tabindex DOM Element attribute to switch between focusable elements. You should add this attribute to your output HTML. Also, don't forget to enable this attribute in 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 小部件中按下另一个键时模拟选项卡按键

Simulate tab keypress when another key is pressed inside CKEditor widget

javascript

ckeditor

ckeditor4.x