如何删除 PrimeNG 编辑器的选项卡功能
How to remove tab feature for PrimeNG editor
PrimeNG 的富文本编辑器使用 quill 并通过 JavaScript 设置它具有使用此代码禁用制表符的功能:
keyboard: {
bindings: {
tab: false,
handleEnter: {
key: 13,
handler: function() {
// Do nothing
}
}
}
}
我可以通过以下方式联系 Angular 中的编辑:
private quill:any;
@ViewChild(Editor) editorComponent: Editor;
ngAfterViewInit() {
this.quill = this.editorComponent.quill;
}
但是如何使用 this.quill 对象将选项卡设置为 false?有什么想法吗?
似乎在 Primeng 中我们没有任何方便的方法来实现这一点。它可能在那里,但我没有找到任何东西。所以在这里我是我的解决方案。它可能不是最好的解决方案,但它应该可以解决您的问题。
component.html
<p-editor [style]="{'height':'320px'}" (onInit)="editorcall($event)"></p-editor>
我正在使用 (onInit),以便我们可以在编辑器加载到 DOM 后立即禁用选项卡。
component.ts
export class EditorComponent {
public tab = {
key:9,
handler: function() {
return false;
}
};
editorcall(event:any){
event.editor.keyboard.bindings[9].length = 0;
event.editor.keyboard.bindings[9].push(this.tab);
}
}
我刚刚删除了键代码为 9 的所有引用。这是 Tab 键。
为什么我创建了一个新的选项卡对象并在绑定中再次推送它,只是因为无论何时单击选项卡,鼠标指针都不应该移动到任何其他 HTML 组件。它应该只存在于编辑器中。
你可以评论这一行 //event.editor.keyboard.bindings[9].push(this.tab);
并查看副作用。
确保这不会在任何地方破坏您的应用程序。
您需要在创建 Quill 编辑器时添加 Tab 键处理程序,目前这不可用,p-editor 的当前实现不通过任何 quill 编辑器的自定义配置
this.quill = new Quill(editorElement, {
modules: {
toolbar: toolbarElement
},
placeholder: this.placeholder,
readOnly: this.readonly,
theme: 'snow',
formats: this.formats
});
我只找到了防止 Tab 键的解决方案
ngAfterViewInit() {
this.quill = this.editorComponent.quill;
if (this.quill) {
this.quill.keyboard.bindings[9].unshift({
key: 9,
handler: function (range) {
console.log('tab is disabled');
return false;
}
});
}
}
PrimeNG 的富文本编辑器使用 quill 并通过 JavaScript 设置它具有使用此代码禁用制表符的功能:
keyboard: {
bindings: {
tab: false,
handleEnter: {
key: 13,
handler: function() {
// Do nothing
}
}
}
}
我可以通过以下方式联系 Angular 中的编辑:
private quill:any;
@ViewChild(Editor) editorComponent: Editor;
ngAfterViewInit() {
this.quill = this.editorComponent.quill;
}
但是如何使用 this.quill 对象将选项卡设置为 false?有什么想法吗?
似乎在 Primeng 中我们没有任何方便的方法来实现这一点。它可能在那里,但我没有找到任何东西。所以在这里我是我的解决方案。它可能不是最好的解决方案,但它应该可以解决您的问题。
component.html
<p-editor [style]="{'height':'320px'}" (onInit)="editorcall($event)"></p-editor>
我正在使用 (onInit),以便我们可以在编辑器加载到 DOM 后立即禁用选项卡。
component.ts
export class EditorComponent {
public tab = {
key:9,
handler: function() {
return false;
}
};
editorcall(event:any){
event.editor.keyboard.bindings[9].length = 0;
event.editor.keyboard.bindings[9].push(this.tab);
}
}
我刚刚删除了键代码为 9 的所有引用。这是 Tab 键。
为什么我创建了一个新的选项卡对象并在绑定中再次推送它,只是因为无论何时单击选项卡,鼠标指针都不应该移动到任何其他 HTML 组件。它应该只存在于编辑器中。
你可以评论这一行 //event.editor.keyboard.bindings[9].push(this.tab);
并查看副作用。
确保这不会在任何地方破坏您的应用程序。
您需要在创建 Quill 编辑器时添加 Tab 键处理程序,目前这不可用,p-editor 的当前实现不通过任何 quill 编辑器的自定义配置
this.quill = new Quill(editorElement, {
modules: {
toolbar: toolbarElement
},
placeholder: this.placeholder,
readOnly: this.readonly,
theme: 'snow',
formats: this.formats
});
我只找到了防止 Tab 键的解决方案
ngAfterViewInit() {
this.quill = this.editorComponent.quill;
if (this.quill) {
this.quill.keyboard.bindings[9].unshift({
key: 9,
handler: function (range) {
console.log('tab is disabled');
return false;
}
});
}
}