Adding custom buttons

[DMarinsa]

Is it possible to add custom buttons to the editor bar?

[bampakoa]

This is not currently possible. Have a look at #18

[stevermeister]

@DMarinsa yes now it's possible, by providing specific config:

const CUSTOM_LIBRARY_BUTTONS = { edithtml: {
    label: 'Edit HTML',
    title: 'Edit HTML',
    command: (ctx: NgxWigComponent) => {
      ctx.editMode = !ctx.editMode;
    },
    styleClass: 'nw-button--source',
    icon: '',
  }
};

...


{ provide: BUTTONS, multi: true, useValue: CUSTOM_LIBRARY_BUTTONS },

check an example here - https://github.com/stevermeister/ngx-wig/pull/95/files#diff-c12d74ca8cc105ab72f388747ca666c8R63

[wafae1234]

@stevermeister please how can i set Edit HTML button to enable editMode initially, i did this :

const CUSTOM_LIBRARY_BUTTONS = { edithtml: { label: '</>', title: 'Edit HTML', command: (ctx: NgxWigComponent) => { ctx.editMode = true; }, styleClass: 'nw-button--source', icon: '', } };

but editor initialize ctx.editMode with false

[stevermeister]

@wafae1234 I think for you case editMode should be provided like an optional @input()
instead of just putting false

do you want to do a PR for it?

[wafae1234]

@stevermeister what do you mean by PR ?

Where can i put @input(), excuse my ignorance i m new to angular
here is my component view:
<ngx-wig [formControl]="editorControl" [placeholder]="placeholder + (required ? ' *' : '')"></ngx-wig>

and the CUSTOM_LIBRARY_BUTTONS value is provided in the module ;

import { A11yModule } from '@angular/cdk/a11y';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { NgxWigModule, NgxWigComponent, BUTTONS } from 'ngx-wig';

import { MatNgxWigComponent } from './mat-ngx-wig/mat-ngx-wig.component';

const CUSTOM_LIBRARY_BUTTONS = {
  edithtml: {
    label: '</>',
    title: 'Edit HTML',
    command: (ctx: NgxWigComponent) => {
      ctx.editMode = true;
    },
    styleClass: 'nw-button--source',
    icon: '',
  }
};

@NgModule({
  imports: [
    A11yModule,
    CommonModule,
    MatFormFieldModule,
    MatInputModule,
    NgxWigModule,
    ReactiveFormsModule,
  ],
  declarations: [MatNgxWigComponent],
  exports: [MatNgxWigComponent],
  providers: [
    { provide: BUTTONS, multi: true, useValue: CUSTOM_LIBRARY_BUTTONS },
  ]
})
export class MatNgxWigModule { }

[stevermeister]

PR

I meant a Pull Request to change the library itself.

I don't think that there is a possibility to do so in the current setup.

@bampakoa what do you think?

[wafae1234]

For the PR, i m afraid that i don't have time to do so, but i'll see.

Please, let me know if there is a solution, thank you

[bampakoa]

@stevermeister @wafae1234 the only way to access the editMode property and change it, is using the ViewChild decorator such as in the following snippet:

import { Component, OnInit, ViewChild } from '@angular/core';
import { NgxWigComponent } from 'ngx-wig';

export class AppComponent implements OnInit  {

  @ViewChild(NgxWigComponent) editor: NgxWigComponent;
  
  ngOnInit() {
    this.editor.editMode = true;
  }
}