<template>
  <div
    v-if="selectedWidget.row == null ? false : widgetType[selectedWidget.parentRow].columns[selectedWidget.column].rows[selectedWidget.row].type == 'textWidget'"
  >
    <div v-b-toggle.Text class="vb-body-right-option pointer option-head m-0">Text Editor</div>
    <b-collapse id="Text" visible>
      <div class="container">
        <div class="row">
          <editor
            api-key
            v-model="widgetType[selectedWidget.parentRow].columns[selectedWidget.column].rows[selectedWidget.row].value.text"
            :init="{ selector: 'textarea#full-featured',
  height: 500,
  menubar: false,
  plugins: [
    'advlist autolink lists link image charmap print preview anchor textcolor colorpicker',
    'searchreplace visualblocks code fullscreen',
    'insertdatetime media table paste code help wordcount '
  ],
  importcss_append: true,
  toolbar: 'fontselect fontsizeselect | bold italic underline forecolor | backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat',
  content_css: [
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
    'https://fonts.googleapis.com/css?family=Gugi'
  ],
  
  fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px 60px'}"
          ></editor>
        </div>
      </div>
    </b-collapse>
  </div>
</template>
font_formats: 'Arial Black=arial black,avant garde;Gugi=Gugi, cursive;Times New Roman=times new roman,times;',
<script>
import Editor from "@tinymce/tinymce-vue";

export default {
  components: {
    Editor
  },
  props: {
    widgetType: {
      type: Array
    },
    selectedWidget: {
      type: Object
    }
  },
  data() {
    return {};
  },
  methods: {}
};
</script>

<style>
</style>
