Workaround for new Boostrap-vue when editor became zombie

[hgc2002]

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:

<b-modal ref="modal_editor">
    <vue-mce v-if="show_editor" :config="config_mce" v-model="content"/>
</b-modal>

The magic code:

forceRerender () {
   this.show_editor = false;                
   this.$nextTick(() => { this.show_editor = true })
},

How to use it:

this.forceRerender()
this.$refs.modal_editor.show()

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.

[jscasca]

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.

[baldeepsinghkwatra]

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

[jscasca]

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?

[jbaum012]

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

[christian-kolb]

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!

[kpomeru]

@hgc2002

Worked like a charm, i had a couple of thoughts regarding this. But my fingers couldn't help me.

[mansarip]

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!