Topic: WYSIWYG hide / disable buttons

JeroenVunderink premium asked 4 years ago


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.)


JeroenVunderink premium commented 4 years ago

Guys,

Any suggestion or advise? This is out for 2 weeks now without a response.

Jeroen


Grzegorz Bujański staff answered 3 years ago


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';

JeroenVunderink premium commented 3 years ago

Thanks you so much!


JeroenVunderink premium answered 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.


JeroenVunderink premium answered 3 years ago


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.


JeroenVunderink premium answered 3 years ago


  // 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';
  }

Grzegorz Bujański staff answered 3 years ago


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???


Grzegorz Bujański staff answered 4 years ago


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



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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