ckeditor / ckeditor5-vue

Official CKEditor 5 Vue.js component.
https://ckeditor.com/ckeditor-5
Other
352 stars 77 forks source link

slow initialization, add helpful tip to documentation #182

Open TheNewSound opened 3 years ago

TheNewSound commented 3 years ago

When using the CKEditor component on a page, navigating to that page becomes extremely slow, causing a short UI-freeze (because Vue is setting up all components before rendering).

Something like the following can be helpful: Add v-if="mountEditor" to <ckeditor> component in the template.

<ckeditor v-if="mountEditor" :editor="editor" :config="editorConfig"/>

Add mountEditor boolean to component data and add setTimeout(() => { this.mountEditor = true }, 800) in the page mounted() lifecycle hook:

  data () {
    return {
      editor: ClassicEditor,
      mountEditor: false,
      editorConfig: { toolbar: ['bold', 'italic', '|', 'outdent', 'indent', '|', 'numberedList', 'bulletedList', '|', 'link'], language: this.$Lang.getLocale() }
    }
  },
  mounted () {
    setTimeout(() => { this.mountEditor = true }, 800)
  },
TLA020 commented 1 year ago

This is still an issue