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 commented 5 years 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 commented 5 years ago
Hi, just another question.
How will you remove the "insert Link and Image" header options from the component?
Regards
Arkadiusz Idzikowski staff commented 5 years 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 commented 5 years 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 5 years ago
Hi @Jan Louw,
Did you try to provide these styles for your styles.scss file or component.scss?
Jan Louw pro commented 5 years ago
Hi Konrad,
I've provided the styles in the component.scss file. Must it be in styles.scss ?
Regards
Jan Louw pro commented 5 years ago
Hi, I've added the scss to the styles.scss, and it worked. Regards
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 9.3.1
- Device: Na
- Browser: Na
- OS: Ubuntu 16:04
- Provided sample code: No
- Provided link: No