search

froala / angular-froala-wysiwyg

Angular 4, 5, 6, 7, 8 and 9 plugin for Froala WYSIWYG HTML Rich Text Editor.
https://froala.com/wysiwyg-editor
735 stars 202 forks source link

.fr-wrapper not appearing (intermittent) #494

Open APet74 opened 2 years ago

APet74 commented 2 years ago

I am on: v3.2.6-1

I am populating the ([froalaModel]) value with a variable, in this current scenario, sometimes the page has data and we are editing it while other times we are starting fresh.

In the case of editing, more often than not there is no .fr-wrapper being generated when I am inserting data. Here is what I see:

image 1

and console:

image 2

If I hard refresh (console open, right-click refresh icon and click empty cache and reload) it will work maybe 30% of the time. I will then see this: (desired)

image 3

and console

image 4

I am using Chrome.

Things to note:

The model will be set with data during the ngAfterContentChecked life cycle. I do some checks to make sure all my data has arrived from a subscription that is building a model then I call a function to set a value into a variable called driverExp which is then set on the editor. Front end code is: <div class="p-col-12 driver-description" [froalaEditor]="editorOptions" [(froalaModel)]="driverExp" (froalaModelChange)="driverExplanationHandler(driverExp)"></div>

I have confirmed that editor options are always set before the model values. I have tried various versions but none have seemed to resolve the issue.

JakeAi commented 2 years ago

Happens to me as well. I can recreate the issue after navigating away, and navigating back. Always loads without being editable and no fr-wrapper.

MooDySmiles commented 2 years ago

I had the same problem in v4.0.9, in my case setting the model data in AftwerViewInit instead that in OnInit solved the case.

But the reason why this happened to me, I still don't know

APet74 commented 2 years ago

I had the same problem in v4.0.9, in my case setting the model data in AftwerViewInit instead of that in OnInit solved the case.

But the reason why this happened to me, I still don't know

I have tried various life cycle hooks and none "worked" the way I wanted them to. At best it'd work but I'd still get console errors (on the dev environment)

https://angular.io/errors/NG0100

What ended up working for me was a ngIf within the HTML template that didn't render to the editor until the data had been loaded.

MooDySmiles commented 2 years ago

Came back to this same problem 2 months later, setting the model data in AfterViewInit was not more a valid workaround

What ended up working for me was a ngIf within the HTML template that didn't render to the editor until the data had been loaded.

Doing this solved my problem (at least for now)

jurt commented 1 year ago

issue still exists on 4.0.19