<template>
  <div class='tinymce' v-if="isFalse">
    <editor id='tinymce' v-model='tinymceHtml' :init='init' ></editor>
  </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/textcolor'
export default {
  name: 'tinymce',
  data () {
    return {
		tinymceHtml:'',
		isFalse:false,
      init: {
        language_url: '/static/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/static/skins/lightgray',
        height: 300,
        // plugins: 'advlist  lists  code  colorpicker textcolor wordcount contextmenu',
        toolbar:
          'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent  | undo redo | link unlink image  | removeformat',
        branding: false
      }
    }
  },
  props:['texts'],
  mounted () {
    tinymce.init({})
		this.isFalse=true
  },
  watch:{
	  texts(val){
		  this.tinymceHtml=val
	  },
	  tinymceHtml(val){
		  this.$emit('contentss',val)
	  }
  },
  components: {Editor}
}
</script>

<style scoped>
   @import "../tinymce/editor.css";

</style>

<style>
	#tinymce_ifr{
		height:auto !important;
	}
	.mce-tinymce{
		box-shadow: 0 1px 2px #e8e9fc !important;
	}
	.tinymce textarea{width:100%;}
	.tinymce .mce-menubar{
		display:none !important;
	}
	</style>