primefaces p:textEditor tab/keyboard 导航不聚焦下一个 UI 组件
primefaces p:textEditor tab/keyboard navigation doesn't focus the next UI component
我们在我们的应用程序中使用 p:textEditor（基于 quill 编辑器）并且我们在 p:textEditor 下面有更多 UI 个组件。问题在于可访问性，用户需要使用键盘在页面中的组件之间切换；但是当涉及到 p:textEditor 时，制表符相当于添加制表符（4 个空格）。
primefaces showcase here 也有同样的问题，我们如何使用键盘从 p:textEditor 导航到提交按钮？
谢谢 Kukeltje，我在羽毛笔编辑器中禁用了 Tab 键。
对于任何想要这样做的人，您必须编辑 META-INF/resources/primefaces/texteditor/ 下的 texteditor.js 文件（当您对 primefaces-version.jar（version=6.1 in我的情况））并在渲染中添加以下代码：function（）
_render: function() {
...
this.cfg.modules = {
toolbar: PrimeFaces.escapeClientId(this.id + '_toolbar'),
keyboard: {
bindings: {
tab: {
key: 9,
handler: function() {
// do nothing
return true;
}
},
'remove tab': {
key: 9,
shiftKey: true,
collapsed: true,
prefix: /\t$/,
handler: function() {
// do nothing
return true;
}
}
}
}
};
...
}
任何想要额外自定义键的人都可以使用 Quill Interactive Playground 来验证您的更改。
我们在我们的应用程序中使用 p:textEditor（基于 quill 编辑器）并且我们在 p:textEditor 下面有更多 UI 个组件。问题在于可访问性，用户需要使用键盘在页面中的组件之间切换；但是当涉及到 p:textEditor 时，制表符相当于添加制表符（4 个空格）。
primefaces showcase here 也有同样的问题，我们如何使用键盘从 p:textEditor 导航到提交按钮？
谢谢 Kukeltje，我在羽毛笔编辑器中禁用了 Tab 键。
对于任何想要这样做的人，您必须编辑 META-INF/resources/primefaces/texteditor/ 下的 texteditor.js 文件（当您对 primefaces-version.jar（version=6.1 in我的情况））并在渲染中添加以下代码：function（）
_render: function() {
...
this.cfg.modules = {
toolbar: PrimeFaces.escapeClientId(this.id + '_toolbar'),
keyboard: {
bindings: {
tab: {
key: 9,
handler: function() {
// do nothing
return true;
}
},
'remove tab': {
key: 9,
shiftKey: true,
collapsed: true,
prefix: /\t$/,
handler: function() {
// do nothing
return true;
}
}
}
}
};
...
}
任何想要额外自定义键的人都可以使用 Quill Interactive Playground 来验证您的更改。