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.)
// 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';
}
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 pro premium commented 4 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
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 pro premium commented 4 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???
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 pro premium commented 4 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.
Can you please also provide the getElementsByClassName('xxxx') for the Paragraaf button and the Color buttons.
Would like to disable these as well.
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';
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- 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 pro premium commented 4 years ago
Guys,
Any suggestion or advise? This is out for 2 weeks now without a response.
Jeroen