<template>
  <div>
    <editor v-model="text" :init="init">
    </editor>
  </div>
</template>

<script>
  import tinymce from 'tinymce' //tinymce默认hidden，不引入不显示
  import Editor from '@tinymce/tinymce-vue'
  import 'tinymce/themes/silver/theme'
  import 'tinymce/skins/ui/oxide/content.css'
  import 'tinymce/plugins/advlist'                //高级列表
  import 'tinymce/plugins/anchor'               //锚点插件
  import 'tinymce/plugins/autolink'               //自动链接
  import 'tinymce/plugins/autoresize'               //编辑器自适应
  import 'tinymce/plugins/autosave'               //自动存稿
  import 'tinymce/plugins/bbcode'               //
  import 'tinymce/plugins/charmap'                //特殊字符
  import 'tinymce/plugins/code'               //编辑源码
  import 'tinymce/plugins/codesample'               //代码示例
  import 'tinymce/plugins/colorpicker'                //文字方向
  import 'tinymce/plugins/contextmenu'                //表情插件
  import 'tinymce/plugins/directionality'               //文档属性
  import 'tinymce/plugins/emoticons'                //全屏
  import 'tinymce/plugins/fullpage'               //帮助
  import 'tinymce/plugins/fullscreen'               //水平分割线
  import 'tinymce/plugins/help'               //插入编辑图片
  import 'tinymce/plugins/hr'               //引入css
  import 'tinymce/plugins/image'                //插入日期时间
  import 'tinymce/plugins/imagetools'               //输出HTML4
  import 'tinymce/plugins/importcss'                //超链接
  import 'tinymce/plugins/insertdatetime'               //列表插件
  import 'tinymce/plugins/legacyoutput'               //插入编辑媒体
  import 'tinymce/plugins/link'               //插入不间断空格
  import 'tinymce/plugins/lists'                //不可编辑元素
  import 'tinymce/plugins/media'                //插入分页符
  import 'tinymce/plugins/nonbreaking'                //粘贴插件
  import 'tinymce/plugins/noneditable'                //预览
  import 'tinymce/plugins/pagebreak'                //打印
  import 'tinymce/plugins/paste'                //快速工具栏
  import 'tinymce/plugins/preview'                //保存
  import 'tinymce/plugins/print'                //查找替换
  import 'tinymce/plugins/quickbars'                //拼写检查
  import 'tinymce/plugins/save'               //tab切入切出
  import 'tinymce/plugins/searchreplace'                //表格插件
  import 'tinymce/plugins/spellchecker'               //内容模板
  import 'tinymce/plugins/tabfocus'               //文字颜色
  import 'tinymce/plugins/table'                //快速排版
  import 'tinymce/plugins/template'               //目录生成器
  import 'tinymce/plugins/textcolor'                //显示元素范围
  import 'tinymce/plugins/textpattern'                //显示不可见字符
  import 'tinymce/plugins/toc'                //字数统计
  import 'tinymce/plugins/visualblocks'               //
  import 'tinymce/plugins/visualchars'                //
  import 'tinymce/plugins/wordcount'                //
  import 'tinymce/plugins/emoticons/js/emojis.min'
  // import 'tinymce/plugins/default' 
  
  // 准备自定义上传图片实现的必要信息
  var contentImageUploadUrl = '';
  var token = '';
  var axios = {};
  var store = {};
  let host= window.location.protocol;
  let protocol=window.location.host;
  export default {
    name: 'PageIndex',
    components: {Editor},
    props: ['value'],
    data() {
      return {
        text: '',
        init: {
          language_url: 'statics/zh_CN.js',// 语言包的路径
          language: 'zh_CN',//语言
          skin_url: 'statics/skins/ui/oxide',// skin路径
          content_css: 'statics/skins/ui/oxide/content.css',
          height: 500,//编辑器高度
          branding: false,//是否禁用“Powered by TinyMCE”
          menubar: true,//顶部菜单栏显示
          // 配置图片上传
          automatic_uploads: true,
          images_upload_url: host+"//"+protocol+"/uploadfileadmin/manager/znzl/file/upload/videoandimgurl",
          // 将该配置设为true则可以避免此问题，它将告诉TinyMCE使用图片文件实际的文件名，而不是每次随即生成一个新的。
          images_reuse_filename: true,
          // images_upload_base_path: '/demo',
          // 模态窗口允许拖动
          draggable_modal: true,
          // 配置默认字体
          fullpage_default_font_family: "SimSun",
          branding: false, // 去水印
          // elementpath: false,  //禁用编辑器底部的状态栏
          statusbar: false, // 隐藏编辑器底部的状态栏
          convert_urls: false, // 自动转换绝对路径
          // paste_data_images: true, // 允许粘贴图像
          // bbcode_dialect: "punbb",
          // 为编辑区写css
          // content_style:''
          // 文字大小
//           fontsize_formats: '11px 12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px',
          // 自定义图片上传实现
              // 自定义图片上传实现
        images_upload_handler: function (blobInfo, success, failure) {
          let host= window.location.protocol;
          let protocol=window.location.host;
          var xhr, formData;
          xhr = new XMLHttpRequest();
          xhr.withCredentials = false;
          xhr.open("POST", host+"//"+protocol+"/uploadfileadmin/manager/znzl/file/upload/videoandimgurl");
          formData = new FormData();
          formData.append("file", blobInfo.blob());
          formData.append("uploadPar","tinymcevue");
          xhr.onload = function(e){
            var json;
            if (xhr.status !== 200) {
              failure('HTTP Error: ' + xhr.status);
              return;
            }
            json = JSON.parse(this.responseText);
            if (!json || typeof json.path != 'string') {
              failure('Invalid JSON: ' + xhr.responseText);
              return;
            }
            success(json.path);
          };
          xhr.send(formData);
        },
          // 插件列表
          plugins: [
            'advlist',
            'anchor',
            'autolink',
            'autoresize',
            'autosave',
            // 'bbcode',
            'charmap',
            'code',
            'codesample',
            'colorpicker',
            'contextmenu',
            'directionality',
            'emoticons',
            'fullpage',
            'fullscreen',
            // 'help',
            'hr',
            'image',
            'imagetools',
            // 'importcss',
            'insertdatetime',
            'legacyoutput',
            'link',
            'lists',
            'media',
            'nonbreaking',
            'noneditable',
            'pagebreak',
            'paste',
            'preview',
            'print',
            // 'quickbars',
            'save',
            'searchreplace',
            // 'spellchecker',
            'tabfocus',
            'table',
            // 'template',
            'textcolor',
            'textpattern',
            'toc',
            'visualblocks',
            'visualchars',
            'wordcount',
          ],
          // 工具栏
          toolbar: [
            '' +
            'undo redo  | ' +
            'fontselect fontsizeselect styleselect ' +
            '| removeformat bold italic underline ' +
            '| outdent indent' +
            ' | alignleft aligncenter alignright alignjustify ' +
            '| bullist numlist | image table | preview fullscreen' +
            ''
          ],
          // 字体列表
          font_formats:
            '' +
            '微软雅黑=Microsoft YaHei;' +
            '黑体=SimHei;' +
            '仿宋_GB2312=FangSong_GB2312;' +
            '楷体=KaiTi;' +
            '宋体=SimSun;' +
            '新宋体=NSimSun;' +
            'Arial=arial,helvetica,sans-serif;' +
            'Helvetica=helvetica;' +
            'Terminal=terminal,monaco;' +
            'Times New Roman=times new roman' +
            '',
          // 关闭文本编辑器相对路径
          relative_urls: false,
          remove_script_host: true,
          document_base_url: this.$store.state.tinymce_upload_url_prefix,
          // document_base_url: this.$store.state.tinymce_upload_url_prefix,

          // valid_elements:'* [*]',
        }
      }
    },
    created() {
      // 设置自定义实现上传图片的地址
      contentImageUploadUrl = this.$store.state.file_upload_content_api
      token = this.$store.state.token;
      axios = this.$axios;
      store = this.$store;


    },
    mounted() {
      // this.init();
      console.log('新富文本', this.value);
      this.text = this.value
    },
    methods: {},
    watch: {
      text(newValue) {
        console.log('富文本', newValue);
        this.$emit('input', newValue);
      },
      value(newValue) {
        this.text = newValue;
      }
    }
  }
</script>


<style>




</style>



