<template>
  <div>
    <div class="vb-body-right-option pointer option-head">Text Editor</div>

    <!-- <div class="container">
    <div class="row">-->
    <editor
      v-model="widgetData.html"
      :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',
        //toolbar: 'fontselect fontsizeselect | bold italic underline | alignleft aligncenter alignright | forecolor backcolor | bullist numlist outdent indent |',
        content_css: [
          '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i'
        ],
        fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px 60px'
      }"
    >
      <v-style type="text/css">
        *{ margin: 0px !important; }
      </v-style>
    </editor>
  </div>
  <!-- </div> -->
  <!-- </div> -->
</template>

<script>
import Editor from "@tinymce/tinymce-vue";

export default {
  components: {
    Editor
  },
  props: {
    widgetData: Object
  }
};
</script>

