theroozbeh / vue-tinymce-editor

This a component provides use of tinymce for vue developers
223 stars 71 forks source link

this.$emit is not woking with setup #63

Closed dharmendradavid closed 2 years ago

dharmendradavid commented 2 years ago

this.$emit is not working from the inside of the setup.

<template>
  <div>
    <editor :id="fieldId" :readonly="editorParameters.readonly" :other_options="tinyOtherOptions" v-model="fieldContent" @custom-emit="onChange"></editor>
</div>
</template>

<script>
import Editor from 'vue-tinymce-editor';

export default {
  name: 'EditorField',
  props: {
    fieldId: String,
    fieldValue: String,
    editorOptions: Object,
    editorParameters: Object,
  },
  components: {
    Editor,
  },
data() {
    return {
      tinyOtherOptions: {
        menubar: false,
        height: 100,
        branding: false,
        content_style: 'body { font-family: Rubik,sans-serif; font-size: 14px }',
        setup: (editor) => {
          const debouncedLogger = tinymce.util.Delay.debounce((e) => {
            console.log('Test check', this, editor.getContent());
            this.$emit('custom-emit'', editor.getContent(), 'inner');
          }, 500);
        },
      },
      isReadonly: false,
      fieldContent: null,
    };
  },
  created() {
   this.initializeValue();
  },
  methods: {
    initializeValue() {
      this.fieldContent = this.fieldValue;
    },
    onChange(event, secondOption = 'outer') {
      console.log('component call', secondOption);
     },
  },
};
</script>
superYan520 commented 2 years ago

  您好,我已收到您的来信,我会尽快回复您的来信。同时感激在这茫茫的人海中还有那么的一个您还记得我,这是我的荣幸!谢谢!

dharmendradavid commented 2 years ago

I got the solution for that. Actually, it was not the issue of TinyMCE.