search

Ledzz / angular2-tinymce

Angular 2 component for TinyMCE MCE WYSIWYG editor
https://angular2-tinymce.surge.sh
66 stars 37 forks source link

Trouble integrating into JHipster app #19

Closed Vinnythetrue closed 7 years ago

Vinnythetrue commented 7 years ago

Hi ! I am developping a JHipster app, using angular2 (v4), I followed the usage guide provided for this module. When I insert the tag in one of my component, I get absolutely no error/warning in my JS console, but nothing shows up on my webpage... So, having no error/warning, I don't know what could be the issue... Can anybody point me something out in the mist ?

Thanks !

Vinny

Vinnythetrue commented 7 years ago

I'm still fighting with this issue... Now I managed to get actual errors in my console !

If I use the tag on some detail page, inside a

used to save a JHipster entity : <app-tinymce [(ngModel)]='emailTemplate.data' ></app-tinymce>

Then I get the following error : No value accessor for form control with unspecified name attribute

Because Angular asks that the form item, if linked to a model value using ngMogel, has a "name" attribute. So, If I add a name attribute : <app-tinymce [(ngModel)]='emailTemplate.data' name="data"></app-tinymce>

Then I get the following error : No value accessor for form control with name: 'data'

I think this one is because the tag is not recognized as a valid input field (therefore, angular is unable to retrieve the field value from it...

Finally, if I try to use the form : <app-tinymce [formControl]='dataControl' ></app-tinymce>

Then I have the following error : No provider for NgControl

What can I do about that ? Apparently I'm misusing the module, but figure out how I should use it otherwise...

Ledzz commented 7 years ago

Did you add a FormsModule to your app module file? Also you can try adding ngDefaultControl directive so you code would be like this 

<app-tinymce [formControl]='dataControl' ngDefaultControl></app-tinymce>
Vinnythetrue commented 7 years ago

Thanks for your answer Ledzz !

I tried what you're proposing, adding an import of FormsModule (which I hadn't) and/or adding ngDefaultControl didn't change anything. As soon as I'm putting the [formControl] stuff on my app-tinymce tag, I get the same error : No provider for NgControl

And nothing in my application shows up on any page.

Vinnythetrue commented 7 years ago

I progressed (I think) little bit on my situation here. Now I no longer have any error when loading my page. What I did is simply adding some stuff in the app-tinymce tag, now it looks like this :

<app-tinymce [(ngModel)]="item.fieldName" name="fieldName" ngDefaultForm ngDefaultControl></app-tinymce>

But it seems there is just nothing going, the app-tinymce remains visible in the DOM, and nothing displays in the web page were the tinymce should reside...

I added the tinymce module in my app module, apparently there should be nothing else to do, right ?

Vinnythetrue commented 7 years ago

I'm still stuck on this one... No one encountered the same issue ? If so, what may have done wrong ? Is there some log or debug information I should check for ?

Vinnythetrue commented 7 years ago

Eventually I got tinymce to display where I wanted ! Unfortunately I have absolutely no idea what the problem was... I was trying with another solution, when I decided to came back to this one, it almost instantly worked...

Sorry for the bummer !

zagoa commented 7 years ago

Hello do you find a solution @Vinnythetrue ? I have the same issue. And I look for an editor which will work with systemjs.

Vinnythetrue commented 7 years ago

Hello zarnifoulette, Sorry for the response delay, I was in vacation...

So yes, I made tinymce work like I needed to, but like I said in my previous post, I have no real clue about why it wasn't working in the first place... Maybe an installation problem, so reinstalling modules would solve your situation ?