<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- 操作按钮 -->
      <div class="ele-table-tool">
        <el-button @click="showViewContent=true" size="small">获取html</el-button>
        <el-button @click="showViewText=true" size="small">获取文本</el-button>
        <el-button @click="editContent" size="small">修改内容</el-button>
        <el-button @click="showDialog=true" size="small">弹窗打开</el-button>
      </div>
      <!-- 编辑器 -->
      <tinymce-editor v-model="value" :init="option1"/>
    </el-card>
    <!-- 内容弹窗 -->
    <el-dialog title="编辑器内容" :visible.sync="showViewContent" width="400px">
      <div>{{ value }}</div>
    </el-dialog>
    <!-- 纯文本弹窗 -->
    <el-dialog title="编辑器纯文本" :visible.sync="showViewText" width="400px">
      <div>{{ value | htmlToText }}</div>
    </el-dialog>
    <!-- 编辑器弹窗 -->
    <el-dialog title="弹窗中使用" :visible.sync="showDialog" width="671px">
      <tinymce-editor v-model="value2" :init="option2"/>
    </el-dialog>
  </div>
</template>

<script>
import TinymceEditor from '@/components/TinymceEditor'

export default {
  name: "DemoEditor",
  components: {TinymceEditor},
  data() {
    return {
      value: '',
      value2: '',
      showViewContent: false,
      showViewText: false,
      showDialog: false,
      // 自定义文件上传(这里使用把选择的文件转成blob演示)
      file_picker_callback: (callback, value, meta) => {
        let input = document.createElement('input');
        input.setAttribute('type', 'file');
        // 设定文件可选类型
        if (meta.filetype === 'image') {
          input.setAttribute('accept', 'image/*');
        } else if (meta.filetype === 'media') {
          input.setAttribute('accept', 'video/*');
        }
        input.onchange = () => {
          let file = input.files[0];
          let reader = new FileReader();
          reader.onload = (e) => {
            let blob = new Blob([e.target.result], {type: file.type});
            callback(URL.createObjectURL(blob));
          };
          reader.readAsArrayBuffer(file);
        }
        input.click();
      }
    }
  },
  computed: {
    option1() {
      return {
        height: 525,
        file_picker_callback: this.file_picker_callback,
        skin_url: this.$store.state.theme.theme === 'dark' ? '/tinymce/skins/ui/oxide-dark' : '/tinymce/skins/ui/oxide',
        content_css: this.$store.state.theme.theme === 'dark' ? '/tinymce/skins/content/dark/content.css' : '/tinymce/skins/content/default/content.css'
      };
    },
    option2() {
      return {
        menubar: false,
        file_picker_callback: this.file_picker_callback,
        skin_url: this.$store.state.theme.theme === 'dark' ? '/tinymce/skins/ui/oxide-dark' : '/tinymce/skins/ui/oxide',
        content_css: this.$store.state.theme.theme === 'dark' ? '/tinymce/skins/content/dark/content.css' : '/tinymce/skins/content/default/content.css'
      };
    }
  },
  methods: {
    /* 修改编辑器内容 */
    editContent() {
      this.value = [
        '<div style="text-align: center;color: #fff;background-image: linear-gradient(to right,#009688,#5fb878);padding: 20px;">',
        '   <div style="font-size: 28px;margin-bottom: 10px;">EASY WEB 后台管理模板</div>',
        '   <div style="font-size: 18px">基于Layui的一套通用型后台管理模板，拥有众多原创组件及模板页面</div>',
        '</div><br/>'
      ].join('');
    }
  }
}
</script>

<style scoped>
</style>