<template>
  <div class='tinymce'>
    <div class="left">
      <editor v-if="show" id='tinymce' v-model='tinymceHtml' :init='init'></editor>
    </div>
    <div class="right">
      <div class="phone">
        <div class="content" v-html='tinymceHtml'></div>
      </div>
    </div>
  </div>
</template>

<script>
  import tinymce from 'tinymce/tinymce'
  import 'tinymce/themes/modern/theme'
  import Editor from '@tinymce/tinymce-vue'
  import 'tinymce/plugins/image'
  import 'tinymce/plugins/link'
  import 'tinymce/plugins/code'
  import 'tinymce/plugins/table'
  import 'tinymce/plugins/lists'
  import 'tinymce/plugins/contextmenu'
  import 'tinymce/plugins/wordcount'
  import 'tinymce/plugins/colorpicker'
  import 'tinymce/plugins/preview'
  import 'tinymce/plugins/media'
  export default {
    name: 'tinymce',
    data () {
      return {
        tinymceHtml: '请输入内容',
        show:'',
        init: {
          language_url: '/static/tinymce/zh_CN.js',
          language: 'zh_CN',
          skin_url: '/static/tinymce/skins/lightgray',
          height: 500,
          plugins: 'preview media link lists image code table colorpicker textcolor wordcount contextmenu',
          // toolbar:
          //   'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
          branding: false
        }
      }
    },
    activated(){
      this.show = true
    },
    deactivated(){
      this.show = false
    },
    mounted () {

    },
    created:function(){
      tinymce.init({})
    },
    components: {Editor}
  }
</script>
<style scoped lang="less">
  @import "../../util/public";
  .tinymce{
    height: 100%;
    overflow: auto;
    .clear-both;
    &>div{
      float: left;
      width: 50%;
      position: relative;
      .phone{
        background:url("../../assets/phone.png") no-repeat;
        background-size: 100% 100%;
        width: 600px;
        height: 800px;
        position: relative;
        .content{
          position: absolute;
          top: 120px;
          left: 135px;
          right: 160px;
          bottom: 135px;
          overflow: auto;
        }
      }
    }
  }
</style>
