Open hgc2002 opened 4 years ago
Hi @hgc2002
I'm a bit late in chiming in with workaround but if I may suggest key changing as part of the modal showing to ensure that the component is re-rendered whenever you open the modal. E.G.
<div>
<b-button v-b-modal.modal-1>Launch tinymce-vue modal</b-button>
<b-modal @shown="render" no-fade id="modal-1" title="tinymce-vue modal">
<editor :key="tinyId" api-key="your-api-key"></editor>
</b-modal>
</div>
When the modal opens it will trigger the @shown
behaviour calling the render function:
components: {
'editor': Editor
},
data: function () {
return {tinyId: 0};
},
methods: {
render () {
this.tinyId += 1;
}
}
By having a new key Vue will force the re-rendering of the component.
Let me know if this works for your use case.
@jscasca I tried with the key as well. But still, it's not clickable. On inspecting the editor I have found that the iframe's body is blank and the content editable prop is not set.
@hgc2002 Did you find any solution?
The initial post is already a workaround.
Without context I am not sure what you, @baldeepsinghkwatra , are trying to achieve and what is working or not working for you. Are you trying to re-render the editor every time it appears in a modal?
working (and easy) solution from the bootstrap-vue github: https://github.com/bootstrap-vue/bootstrap-vue/issues/4537#issuecomment-580133825
Setting the no-enforce-focus option works: https://codesandbox.io/s/bootstrapvue-tinymce-vue-modal-focusin-kxhvm
The same issue is there when using a Dialog with Vuetify. The :key
method didn't work for me. Only the initial workaround from @hgc2002, thanks for that!
@hgc2002
Worked like a charm, i had a couple of thoughts regarding this. But my fingers couldn't help me.
working (and easy) solution from the bootstrap-vue github: bootstrap-vue/bootstrap-vue#4537 (comment)
Setting the no-enforce-focus option works: https://codesandbox.io/s/bootstrapvue-tinymce-vue-modal-focusin-kxhvm
This works for me, thanks!
This issue is stale because it has been open 30 days with no activity. Please comment if you wish to keep this issue open or it will be closed in 7 days.
Answering the bot: Yes, this issue is very much still relevant 🙂
The current behavior is described in detail in #106 and #113: Editor get loaded correctly on first time it is shown, then second and later on it became blank / disabled / zombie / frozzen / etc.
The description of the real internal problem is also in those tickets. I want to show you my workaround, ugly but functional: reloading the component with v-if. Yes, it's not the best, but it works.
Here is it the component used:
The magic code:
How to use it:
The rerender function (and other options that didn't work this time) comes from the following reference: https://michaelnthiessen.com/force-re-render/
My environment: "bootstrap": "^4.4.1", "bootstrap-vue": "^2.5.0", "tinymce": "^5.1.1", "vue": "^2.6.11", "vue-mce": "^1.5.3",
Regards.