using vue-ckedtior in template with v-if

[fzikesch]

Hello, i've got some strange behaviour. We have a construct like

<keep-alive>
  <my-form-template  v-if="showForm" />
</keep-alive>

where <my-form-template> contains the <ckeditor> template.

However, when <my-form-template> is hidden (showForm := false) and shown again, the ckeditor does not work anymore.

Seems to be more a ckeditor issue (the iframe of the editor is corrupted, or whatever...).

But any ideas how to solve this problem?

As workaround i use a extra "active" property in ckeditor.vue in combination with a watcher

        watch: {
        active (value) {
            if (value) {
                this.create()     // mounted () 
            } else {
                this.destroy()  // beforeDestroy ()
            }
        }
    },

Has anybody a better idea?

[dangvanthanh]

@fzikesch Can you use v-if in with vue-ckeditor component such as:

<template>
  <div class="app">
    <input type="checkbox" v-model="selected"> <span v-text="selectedText"></span>
    <div v-if="selected">
        <ckeditor v-model="msg"></ckeditor>
    </div>
  </div>
</template>

<script>
import Ckeditor from 'vue-ckeditor2'

export default {
  components: { Ckeditor },
  data () {
    return {
      selected: false,
      msg: 'Vue ckeditor'
    }
  },
  computed: {
    selectedText () {
      return this.selected ? 'Hide Ckeditor' : 'Show Ckeditor'
    }
  }
}
</script>

I run code with vue-rollup-boilerplate templates. It's working fine.

[fzikesch]

toggling the editor inside single view works fine. I tried out your suggestion with v-if

But if the ckedtior is inside a component, which is marked as "keep-alive", it makes problems.

To reproduce the problem, you need two vue-files. The inner-component file ./components/TestCkeditor.vue:

<template>
  <div class="inner-component">
      ckeditor component here:
        <ckeditor v-model="msg"></ckeditor>
  </div>
</template>
<script>
import Ckeditor from 'vue-ckeditor2'
export default {
  components: { Ckeditor }
}
</script>

And as main

<template>
  <div class="app">
    <input type="checkbox" v-model="selected"> <span v-text="selectedText"></span>
    <keep-alive>  
        <test v-if="selected">
    </keep-alive>
  </div>
</template>
<script>
import test from './components/TestCkeditor.vue'
export default {
  components: { test },
  data () {
    return {
      selected: false
    }
  },
  computed: {
    selectedText () {
      return this.selected ? 'Hide Ckeditor' : 'Show Ckeditor'
    }
  }
}
</script>

I have no idea, why this is corrupting the ckeditor instance. The problems seems to be the iframe of the ckeditor. (using CKEDITOR.inside works).

But this seems not to be a issue of your work. So i can close it, if there is no idea, how to fix.

In my case, the ckeditor is deep-inside components, where i don't no whether the parent-components are cached by vue or not - it depends on the case. So i can't work around.

[dangvanthanh]

I can't reproduce with your code. It's working fine, too. Can you check version of vue-ckeditor in your package.json if vue-ckeditor2 version below < 1.0.4. Please upgrade to 1.0.4, I think it will fix your problem.

[fzikesch]

• Can you type in the text/input field ?
  • when ckedtior is toggled, the content is gone and the textfield doesn't work anymore.

btw: using boilerplate, updated everything (fixed missing test-end-tag) and it still does not work (ckeditor version 4.6.2)

[dangvanthanh]

@fzikesch Thank you. I see and can reproduce. I will improve it.

[Cookizza]

Is there any update on this? I've got a similar issue when repositioning cards which contain ckEditor.

Thanks!

[Cookizza]

BUMP!