Topic: WYSIWYG hide / disable buttons
Is it possible to hide or disable buttons in the WYSIWYG editor. So for instance I want the button for "Insert Link" and "Insert Image" disabled or preferable hidden. same for the "Show HTML" button. Can I do this?
Expected behavior I can set in the TS file the options of buttons i want to see.
Actual behavior Can't find if or how to do this.
Resources (screenshots, code snippets etc.)
Yes. Try this:
(document.getElementsByClassName('fa-font')[0].closest('.mdb-wysiwyg-toolbar-dropdown-toggle') as HTMLElement).style.display = 'none';
(document.getElementsByClassName('text-style-dropdown')[0] as HTMLElement).style.display = 'none';
Can you please also provide the getElementsByClassName('xxxx') for the Paragraaf button and the Color buttons.
Would like to disable these as well.
This works and compiles:
// Hide the unwanted WYSIWYG options //
ngAfterViewInit() {
(document.getElementsByClassName('fa-paperclip')[0].closest('.mdb-wysiwyg-toolbar-group') as HTMLElement).style.display = 'none';
(document.getElementsByClassName('fa-code')[0].closest('.mdb-wysiwyg-toolbar-group') as HTMLElement).style.display = 'none';
}
JeroenVunderink premium commented 3 years ago
Can you please also provide the getElementsByClassName('xxxx') for the Paragraaf button and the Color buttons.
Would like to disable these as well.
// Hide the unwanted WYSIWYG options //
ngAfterViewInit() {
(document.getElementsByClassName('fa-paperclip')[0].closest('.mdb-wysiwyg-toolbar-group') as HTMLElement).style.display = 'none';
(document.getElementsByClassName('fa-code')[0].closest('.mdb-wysiwyg-toolbar-group') as HTMLElement).style.display = 'none';
}
Sure. Just put this code inside ngAfterViewInit() lifecycle hook:
ngAfterViewInit() {
document.getElementsByClassName('fa-paperclip')[0].closest('.mdb-wysiwyg-toolbar-group').style.display = 'none'
document.getElementsByClassName('fa-code')[0].closest('.mdb-wysiwyg-toolbar-group').style.display = 'none'
}
JeroenVunderink premium commented 3 years ago
Thanks. It works in runtime but produces this error at compile time:
ERROR in src/app/pages/litters/edit/editlitter.component.ts:158:94 - error TS2339: Property 'style' does not exist on type 'Element'. 158 document.getElementsByClassName('fa-paperclip')[0].closest('.mdb-wysiwyg-toolbar-group').style.display = 'none' ~~~~~ src/app/pages/litters/edit/editlitter.component.ts:159:89 - error TS2339: Property 'style' does not exist on type 'Element'. 159 document.getElementsByClassName('fa-code')[0].closest('.mdb-wysiwyg-toolbar-group').style.display = 'none'
Any suggestions???
Hi.
Unfortunately, this solution is not available at the moment. To achieve this, you can hide these elements that use this code:
document.getElementsByClassName('fa-paperclip')[0].closest('.Mdb-wysiwyg-toolbar-group').style.display = 'none'
document.getElementsByClassName('fa-code')[0].closest('.mdb-wysiwyg-toolbar-group').style.display = 'none'
JeroenVunderink premium commented 3 years ago
Could you please elaborate a little more on this?
So do I need a @ViewChild? And how? And a little example on how to code the "document.getElementsByClassName('fa-code')[0].closest('.mdb-wysiwyg-toolbar-group').style.display = 'none'".
Would be very helpfull.
Thanks
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Premium
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: 9.3.1
- Device: MacAir
- Browser: Chrome
- OS: MacOS
- Provided sample code: No
- Provided link: No
JeroenVunderink premium commented 3 years ago
Guys,
Any suggestion or advise? This is out for 2 weeks now without a response.
Jeroen