Topic: Wysiwyg Editor - Bundle
Hi,
I'm trying to you the latest Wysiwyg (9.3.1) and getting the following compilation error:
ERROR in src/app/comp/team-act/team-act.component.ts:890:31 - error TS2339: Property 'subscribe' does not exist on type '() => Observable<any>'.
My extract:
import { MdbTableDirective, MdbTablePaginationComponent, IMyOptions, ModalDirective, Option, MdbCheckboxChange } from 'ng-uikit-pro-standard'; import {MdbWysiwygComponent} from 'mdb-wysiwyg';
export class TeamActComponent implements OnInit, AfterViewInit, OnDestroy { @ViewChild(MdbWysiwygComponent, { static: true }) wysiwyg: MdbWysiwygComponent;
onComments(usr: string): void { console.log('Launch Modal for Comments: %s', usr); this.wysiwyg.valueChange$.subscribe((data: any) => { console.log(data); }); this.mdmemcom.show(); }
In addition, how do you "Reset" the content of the Wysiwyg?
Regards
There is a problem with syntax, valueChange$ should be a function call:
this.wysiwyg.valueChange$().subscribe((value) => console.log(value));
To reset the component content you can for example use ngModel directive:
<mdb-wysiwyg #wysiwyg [options]="options" [(ngModel)]="content"></mdb-wysiwyg>
Then create content variable in your ts file and set the variable to empty string to reset the content.
Jan Louw pro premium priority vip early access commented 10 months ago
Hi,
Please then update your documentation around the valueChange$ to reflect being a function call.
Thank you for the "reset" solution.
Regards
There is a problem with syntax, valueChange$ should be a function call:
this.wysiwyg.valueChange$().subscribe((value) => console.log(value));
To reset the component content you can for example you ngModel directive:
<mdb-wysiwyg #wysiwyg [options]="options" [(ngModel)]="content"></mdb-wysiwyg>
Then create content variable in your ts file and set the variable to empty string to reset the content.
Jan Louw pro premium priority vip early access commented 10 months ago
Hi, just another question.
How will you remove the "insert Link and Image" header options from the component?
Regards
Arkadiusz Idzikowski staff commented 10 months ago
Unfortunately it's not possible to remove those elements, but you can set its display to none with css, for example:
.btn-clear .fa-paperclip { display: none; }
and accordingly for 'fa-image' icon
Jan Louw pro premium priority vip early access commented 10 months ago
Hi Arkadiusz,
I've tried your solution, but I can not get it to work.
Here is the code:
Template:
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<mdb-wysiwyg class="btn-clear fa-paperclip" [(ngModel)]="comments"></mdb-wysiwyg>
</div>
</div>
</div>
</div>
SCSS:
.btn-clear .fa-paperclip { display: none; }
.btn-clear .fa-image { display: none; }
Regards
Konrad Stępień staff commented 10 months ago
Hi @Jan Louw,
Did you try to provide these styles for your styles.scss file or component.scss?
Jan Louw pro premium priority vip early access commented 10 months ago
Hi Konrad,
I've provided the styles in the component.scss file. Must it be in styles.scss ?
Regards
Jan Louw pro premium priority vip early access commented 10 months ago
Hi, I've added the scss to the styles.scss, and it worked. Regards
Resolved
- User: Pro
- Premium support: Yes
- Technology: Angular
- MDB Version: 9.3.1
- Device: Na
- Browser: Na
- OS: Ubuntu 16:04
- Provided sample code: No
- Provided link: No