Comments (8)
@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;
}
}
from ngx-wig.
This is not currently possible. Have a look at #18
from ngx-wig.
@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
from ngx-wig.
@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
from ngx-wig.
@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?
from ngx-wig.
@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 { }
from ngx-wig.
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?
from ngx-wig.
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
from ngx-wig.
Related Issues (20)
- Creating custom buttons for version 0.3.6 HOT 1
- [idea] CI to publish on npm HOT 2
- bubble editor
- Erroneous behavior trying to delete text from the editor HOT 4
- Custom Buttons for version 11.0.0.
- Event on blur HOT 1
- Use with validators HOT 1
- hide toolbar and change styles HOT 4
- configure it uses only tags I decide HOT 4
- Where is version 12 of the npm package? HOT 3
- Angular 13 support HOT 4
- Custom dropdown
- Remove legacy code HOT 1
- <br> tag left after textarea clear HOT 5
- Improve documentation about custom buttons. HOT 5
- Application error when custom button does not set `styleClass`
- Angular 14 support HOT 3
- Migrate to ESLint HOT 7
- npm package public version is still 13.2.6 HOT 1
- Angular 15 support HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ngx-wig.