How to reinitialize tinymce

Hi,

I’m trying to reuse the compont with tinymce. But when I’m re-open the component, it became empty.

on my vue component

<template>
  <div>
    <v-dialog 
			v-model="dialog" persistent
			fullscreen 
      hide-overlay 
      transition="dialog-bottom-transition">
			<v-card tile>
        <v-toolbar
          flat
          >
          <v-btn icon 
            @click="dialog = false">
            <v-icon>chevron_left</v-icon>
          </v-btn>
          <v-toolbar-title>Edit Content</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-toolbar-items>
            <v-btn 
              flat
              color="secondary"
              @click="setTextEditorContent">Save</v-btn>
          </v-toolbar-items>
        </v-toolbar>
				<v-card-text class="relative pa-0">
          <!-- <vue-mce 
            v-model="value"
            :config="config"/> -->
          <div :style="`height:${height}`">
            <tinymce-editor
              ref="editor"
              api-key="h3j674uac1gnsid8q3er8ltrt99qi2rnai7lp5wkeg025br7" 
              v-model="value"
              :init="config">
            </tinymce-editor>
          </div>

				</v-card-text>
			</v-card>
    </v-dialog>
  </div>
</template>

<script>
import Editor from '@tinymce/tinymce-vue';
// commonjs require
// NOTE: default needed after require

export default {
  data () {
    return {
      value: null,
      dialog: false,
      height: 800,
      config: {
        automatic: true,
        height: 800,
        fontsize_formats: "8px 10px 12px 14px 16px 18px 20px 22px 24px 26px 39px 34px 38px 42px 48px",
        plugins: 'print preview fullpage powerpaste searchreplace autolink table image media link',
        toolbar1: 'formatselect fontsizeselect | bold italic strikethrough forecolor backcolor link | alignleft aligncenter alignright | insertfile image link',
        table_toolbar: "tableprops tabledelete | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol"
      }
    }
  },
  components: {
    'tinymce-editor': Editor // <- Important part
  },
  methods: {
    open (value) {
			let vm = this
      this.dialog = true
      vm.value = value
      console.log(value)
      console.log(this.$refs.editor)
			vm.$forceUpdate()
			return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },
    closeDialog () {
			this.dialog = false
		},
		setTextEditorContent () {
      console.log(this.$refs.editor)
			this.resolve(this.value)
      this.dialog = false
		},
  },
  mounted () {
    this.height = window.innerHeight - 64
  }
}
</script>

<style>
</style>

[SimonFc]

Hi! I think this is due to a common issue with TinyMCE in iframe mode(try inline mode and it’ll probably work just fine). Whenever an iframe gets moved/detached from the DOM it’ll re-render - this is simply native iframe behaviour. This will break TinyMCE and unfortunately there’s nothing we can do about it. As of now, it’s up to the user to either make sure that doesn’t happen or to manually tear down/set up TinyMCE(tinymce-vue) whenever necessary.

You should be able to use one of the standard workaround to achieve this. I think this simple guide could be useful for you!

[richardhulbert]

If you are using the editor in various places. I found that the easiest way is to force it to re-render as @SimonFc suggests. You will need to bind the :key to a value and change that value to force Vue to re-render the component.