<template>
  <editor
    v-if="data_ready"
    api-key="38mx763ade0rxui8uiun6tourzf3bb4rlq2deh5hvtsv41rp"
    :init="config"
    ref="editor"
    v-model="data"
    />
</template>

<script>
import Editor from '@tinymce/tinymce-vue'

export default {
  name: 'PageEditorTiny',
  props: ['id'],
  components: {
    'editor': Editor
  },
  data: function () {
    return {
      data: '',
      data_ready: false,
      config: {
        language: 'zh_CN',
        height: 600,
        plugins: 'lists link image table code help wordcount',
        toolbar: 'undo redo | styles | bold italic underline forecolor align | link image',
        images_upload_url: '/api/v1/asset/?token=' + this.$root.token,
        content_css: this.id ? '/api/v1/article.css?id=' + this.id : '',
      }
    };
  },
  computed: {
  },
  methods: {
    set_data: function(data) {
      this.data = data;
    },
    get_data: function() {
      return this.data;
    },
    load_image_list: async function() {
      var r = await this.$root.api_get("/api/v1/image-list/?token=" + this.$root.token);
      this.config.image_list = r.data.images;
      this.data_ready = true;
    },
  },
  mounted() {
    this.load_image_list();
  },
}
</script>

<style>
</style>

