vue-froala-wysiwyg htmlSet error in modal

trafficstars

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.

Aug 17 '19 16:08 wangjacsi

@wangjacsi any update on this?

Sep 04 '19 19:09 nevaan9

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

Sep 05 '19 07:09 wangjacsi

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

Oct 27 '19 01:10 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.

Oct 27 '19 03:10 yellow1912

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

Feb 07 '20 05:02 rcheung9

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

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

Feb 07 '20 05:02 yellow1912

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

Feb 07 '20 05:02 rcheung9

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.

Feb 07 '20 05:02 yellow1912

@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.

Feb 07 '20 06:02 rcheung9

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

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

Feb 07 '20 06:02 yellow1912

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.