Plugin WYSWIG for Angular - How to binding ngModel


Topic: Plugin WYSWIG for Angular - How to binding ngModel

vizmedia pro asked 6 years ago

How to bind the mdb-wyswig control with the variable by ngModel

<mdb-wysiwyg [(ngModel)]="context"></mdb-wysiwyg>

did not work

how to set and read the contents of the component ?


vizmedia pro answered 6 years ago

thx, but that's not good The component can not be used in common operations on a form

You just need to implement ControlValueAccessor

Do you think about such a change?


vizmedia pro answered 6 years ago

points 2 and 3 have not been repaired!

Please, do something with this, because it's very important bugs.

As of today, I can not use this plugin in my business.


Arkadiusz Idzikowski staff commented 6 years ago

We added ControlValueAccessor in version 7.5.0. Please upgrade.

We will take a closer look at those bugs.


Damian Gemza staff answered 6 years ago

Dear vizmedia,

There's no such possibility to use ngModel on mdb-wysiwyg component.

We have to add some output which allows getting the mdb-wysiwyg value.

As a workaround, please use the below code to get the actual editor value:

.html:

<mdb-wysiwyg #wysiwyg [value]="value"></mdb-wysiwyg>

.ts:

import {Component, HostListener, ViewChild} from '@angular/core';
import {MdbWysiwygComponent} from "mdb-wysiwyg";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  @ViewChild(MdbWysiwygComponent) wysiwyg: MdbWysiwygComponent;
  value: string = '<h1>New Value</h1>';

  @HostListener('click') onClick() {
    console.log(this.wysiwyg.textarea.nativeElement.innerHTML);
  }

}

Best Regards,

Damian


Damian Gemza staff answered 6 years ago

Yes, we'll implement such a feature, but not now.

In the 7.4.4 release we'll add two features: 1) event which emits wysiwyg's value, 2) observable to which you'll be able to subscribe to get the latest wysiwyg's value.

Best Regards,

Damian


vizmedia pro answered 6 years ago

7.4.3 Unfortunately, the plugin is difficult to use in the project

<mdb-wysiwyg #wysiwyg [value]="value"></mdb-wysiwyg>

1. if value is null nothing is displayed, mdb-wyswig disappears

2. If value is empty string, mdb-wysiwyg displays the unchangeable welcome text

enter image description here

How should I show it to the customer ???!!!


vizmedia pro answered 6 years ago

3. Software change in value also has no effect. You need to re-render the component to see the new value.


vizmedia pro answered 6 years ago

4. when I do as you wrote

@HostListener('click') onClick() {
    this.value = this.wysiwyg.textarea.nativeElement.innerHTML;
  }

for example value is

value: "to be <strike>or not</strike> to be"

when I click in "show HTML code"

the value changes to

value: "to be &lt;strike&gt;or not&lt;/strike&gt; to be"

I broke down :(((


Damian Gemza staff answered 6 years ago

Dear vizmedia,

Please try to update the mdb-wysiwyg to the latest 7.4.4 version (just download the new .zip and copy from it the .tgz archive and install it), and check if those problems still exist.

With 7.4.4 we have added an output called (valueChanged) with which you can subscribe to the changing value of WYSIWYG.

Best Regards,

Damian


vizmedia pro answered 6 years ago

The new version did not eliminate any of the above problems.

Are you going to improve them? will it stay like that?


Arkadiusz Idzikowski staff commented 6 years ago

We will fix those problems, unfortunately I can't provide an ETA for that yet.


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
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.4.3
  • Device: PC
  • Browser: Chrome
  • OS: Win 10 Pro
  • Provided sample code: No
  • Provided link: No