<template>
  <div class='tinymce3' v-if="isFalse">
    <editor id='tinymce3' v-model='tinymceHtml' :init='init' ></editor>
  </div>
</template>

<script>
import $ from 'jquery';
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: 200,
        branding: false,
         forced_root_block:'#v',
         handle_event_callback : 'eventHandle',
      }
    }
  },
  props:['texts'],
  mounted () {
    this.isFalse = true;


    function eventHandle(event)
{
  console.log(event)
}


  },
  watch:{
	  texts(val){
      this.tinymceHtml=val

      var content = tinymce.get('tinymce3').getContent({format: 'raw'});
        // alert(content);
      console.log(val)
	  },
	  tinymceHtml(val){
      this.$emit('contentss',val)
      console.log(val)
    },
    	// str = str.replace(/<p>(.*?)<\/p>/g,"$1")
  },
  components: {Editor}
}
</script>

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

</style>

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