Workaround for new Boostrap-vue when editor became zombie

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.

[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

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