htmlSet error in modal

[wangjacsi]

I got this error below:

Uncaught TypeError: Cannot read property 'html' of null at htmlSet (vue-froala.js?86a1:111) at eval (vue-froala.js?86a1:121) at E.Bootstrap.currentConfig.events.initialized (vue-froala.js?86a1:260) at E.Bootstrap.currentConfig.events.initialized (vue-froala.js?86a1:260) at Object.v [as trigger] (froala_editor.min.js?b1fc:7) at E.Bootstrap.S (froala_editor.min.js?b1fc:7)

I'm using the editor in the modal component The problem does not occur at first modal displayed, but continues to occur after that.

[nevaan9]

@wangjacsi any update on this?

[wangjacsi]

If we use modal just toggle the display hide or show (Bootstrap modal dose this), it will work fine. But if create modal component & after destroy it not just hide(display:none), It makes the same error. (like modal of vueax(ui/ux tool))

So we can use modal(or component) just toggling the display. @nevaan9

[yellow1912]

I can confirm this. The error happens if the textarea is currently set to display:none. Any remedy?

[yellow1912]

After further checking, I don't think it's an error with display:none, still unsure about the exact cause however. But this happens on a form with 2 froala instances.

[rcheung9]

@yellow1912 Yep still have the issue. Did you solve it?

[yellow1912]

I think temporarily fixed it by putting the code inside nextTick, something like this

this.$nextTick(() => { initControls.initialize();})

[rcheung9]

@yellow1912 Sorry, what is initControls supposed to be? Is that a ref? And you call that on mounted?

[yellow1912]

I use the manual instantiation: https://github.com/froala/vue-froala-wysiwyg#manual-instantiation

So I put that code inside a manual global mixin function. My guess is that there is some kind of race condition.

[rcheung9]

@yellow1912 Ah I see, that's how you get access to the froala instance. My last resort would've been to use the core froala js and make my own froala vue component. Thanks for the help.

Hope they fix this soon, I've seen 3-4 issues reference this same bug for months now.

[yellow1912]

Yeah I referenced to this same bug in their core lib as well:

https://github.com/froala/wysiwyg-editor/issues/3719

[nghialamngoc]

In my Vue project, I use "vue-froala-wysiwyg" lib and have the same issue. I hope they fix this soon. By the way Is there any temp solution to fix it? If yes please help me.

[t0milee]

@nghialamngoc any luck with this?

[nghialamngoc]

@t0milee bad news is no. I still can not resolve this problem :(

[Augustoz1]

Temporary solution:

<froala :config="config" :value="my_field"></froala>

config: { events: { 'html.get': function (html) { this.my_field= html;}.bind(this)}},

I hope it helps to someone.

[ilyaskarim]

@kapil2704 Can you please check this?