Two Froalas with same options not working

[uwe-pichl]

When two Froalas are on the same page and using the same options, the second froala doesn't update it's "froalaModel"! If both froalas using different options, the binding works.

Example: https://stackblitz.com/edit/angular-froala-13aagf-tmlz3d

[uwe-pichl]

Using "angular-froala-wysiwyg": "^3.0.1"

[emeryowa]

I am experiencing the same issue and it is blocking us from upgrading to v3

See https://stackblitz.com/edit/angular-jafgm6?file=src%2Fapp%2Fapp.component.ts

When two editors in the same component are initialized with the same options object you can only retrieve the latest value from the first editor. If you retrieve the latest value from the 2nd editor, you only get the original value.

Tested with version 3.0.5

Any indication on when this will be fixed?

[jjsiman]

Also having this issue.

Essentially we have multiple editors embedded in different form fields, most of which share the same options. It would be great to reuse these options objects instead of giving each form field it's own unique copy.

[JCanlett]

We are also facing this issue after upgrading to v3. Any updates on when this fix could be coming? This seems like a major bug.

[dejanmartinovic]

@uwe-pichl This issue is scheduled for a fix in version 3.0.7. (will be released in the next 10 days) As a temporary solution, maybe you should consider something like this:

[gigantedocil]

You can workaround this issue if you deep clone the options every time you assign it. You can use lodash or use something like JSON.parse(JSON.stringify(options));

[JCanlett]

@uwe-pichl This issue is scheduled for a fix in version 3.0.7. (will be released in the next 10 days) As a temporary solution, maybe you should consider something like this:

Any word on 3.07 release ?

[JCanlett]

@uwe-pichl Update plz

[JalpeshVadgama]

I have tested it on version 3.1 and still the same issue? Can you please provide an update on it?

[JalpeshVadgama]

The workaround for this is like the following.

In the component HTML file put HTML like below

<textarea [froalaEditor]="GetOptions()" [(froalaModel)]="description1"></textarea>

<textarea [froalaEditor]="GetOptions()" [(froalaModel)]="description2"></textarea>

In the component typescript file create a function like below. public GetOptions(): any { return JSON.parse(JSON.stringify(this.options)); }

[Pei116]

Please fix it. It still exists in v3.1.0. It works fine without options but not whenever I put any options.

[elmartino]

Any update on this?

[shilpa-invy]

Does someone has a solution for this?? I am using angular-froala version 3.1.1 and facing this issue when i am creating multiple editors with same config on initialising the config is only getting applied to the first editor and not on any other editors i am getting following error " Converting circular structure to JSON --> starting at object with constructor 'E.Bootstrap' | property '$oel' -> object with constructor 'b' | property '0' -> object with constructor 'HTMLTextAreaElement' --- property 'data-froala.editor' closes the circle" It is causing me a lot of trouble. Can someone please help me with this?

[elmartino]

Like @gigantedocil said, use a different options object for each instance with for example const options1 = JSON.parse(JSON.stringify(options));

[shilpa-invy]

@elmartino , The editor instances are generated dynamically using repeat in angular js and can vary in number depending on the list of content that i have.

[elmartino]

@elmartino , The editor instances are generated dynamically using repeat in angular js and can vary in number depending on the list of content that i have.

Then do something like [froalaEditor]="getFroalaOptions()"

getFroalaOptions() { return JSON.parse(JSON.stringify(this.froalaOptions)); }

[shilpa-invy]

@elmartino , My current code looks something like this-- html

froala config $scope.froalaoption= { charCounterCount: false, quickInsertTags: [], toolbarInline: true, toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', '|', 'specialCharacters', 'color', 'emoticons', 'inlineStyle', 'paragraphStyle', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', '-', 'quote', 'insertHR', 'insertLink', 'insertTable', '|', 'undo', 'redo', 'clearFormatting', 'selectAll', 'html', 'applyFormat', 'removeFormat', 'fullscreen', 'print', 'help'], [other config options...] };

So can you guide me what changes will i need to make in this?

[elmartino]

i'm sorry but first upgrade angular, then come back

[shilpa-invy]

@elmartino ,I cannot do that. isn't there any workaround for this in my current angular version?

[elmartino]

I don't know. maybe someone else. You are using a version that is like 10 years old and 10 major versions behind :P

[dejanmartinovic]

We have fixed this issue in version angular-froala-wysiwyg 3.2.1-1. Regards

[LLITRIXKOD]

Still not working