How to set focus on ckeditor

[ctwhome]

Hi, I am not able to set focus on the CKEditor after mounting, do you know how to do it?

<template>
  <vue-ckeditor
    v-model="htmlContent"
    type="classic"
    ref="editor"
  />
</template>

mounted() {
    this.$nextTick(() => this.$refs.editor.focus())
  },

Thanks!

[dangvanthanh]

Hi @ctwhome

You can use focus such as

<template>
  <vue-ckeditor
    v-model="htmlContent"
    type="classic"
    ref="editor"
    @focus="onFocus($event)"
  />
</template>

<script>
export default {
   methods: {
     onFocus(event) {
        console.log(event);
     }
   }
}
</script>

[ctwhome]

Hi @dangvanthanh thanks for the reply, I am aware of the focus event, what I need to achieve is the other way around, be able to focus "vue-ckeditor" programmatically.

An image is more than a thousand words:

[dangvanthanh]

Hi @ctwhome

Currently, you can use startupFocus: true in your config to focus when initialize editor. I will improve the options to config focus the editor.

Example

<template>
  <div>
    <button @click.prevent="showEditor">Description</button>
    <vue-ckeditor v-if="isShow" v-model="content" :config="config" ref="editor" />
  </div>
</template>

<script>
import VueCkeditor from 'vue-ckeditor2';

export default {
  name: "HelloWorld",
  components: {
    VueCkeditor
  },
  data() {
    return {
      isShow: false,
      content: '',
      config: {
        toolbar: [
          ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript']
        ],
        height: 300,
        startupFocus: true
      }
    };
  },
  methods: {
    showEditor() {
      this.isShow = !this.isShow;
    }
  }
};
</script>

<style scoped>
</style>

Thank you very much for post issues.

[ctwhome]

oke I will try and let you know, thank YOU for the effort

[ctwhome]

Hi @dangvanthanh it didn't do the trick. It needs a specific method to focus on the editor.

 <vue-ckeditor
    v-model="htmlContent"
    :config="{ ...editorConfig, placeholder }"
    ......

editorConfig: {
        toolbarLocation: 'bottom', 
        startupFocus: true,
        ignoreEmptyParagraph: true,
       ...
}

[shoungwey]

add a event @ready="onEditorReady" to <vue-ckeditor v-if="isShow" v-model="content" :config="config" ref="editor" @ready="onEditorReady" />

and add this method in methods of Vue: . . methods: { onEditorReady(editor){ editor.focus(); } }

that's all.