
 /**
 * upfile 1.1v
 * The tinymce-plugins is used to upfile
 * 
 * https://github.com/Five-great/tinymce-plugins
 * 
 * Copyright 2020, Five(Li Hailong) The Chengdu, China https://www.fivecc.cn/
 *
 * Licensed under MIT
 */



tinymce.PluginManager.add('upfile', function(editor, url) {
	var pluginName='上传文件';
	window.upfile={}; //扔外部公共变量，也可以扔一个自定义的位置
  window.upfile.file_callback = editor.getParam('file_callback', undefined, 'function');
  window.upfile.tinymce = tinymce;
  window.upfile.res={};
	var openDialog = function() {
		return editor.windowManager.open({
	  title: pluginName,
	  body: {
		type: 'panel', // The root body type - a Panel or TabPanel
		items: [ // A list of panel components
			{
				type: 'iframe', // component type
				name: 'upfile_iframe', // identifier
				label: '  ', // text for the iframe's title attribute
				sandboxed: true,
			 }
		]
	  },
	  initialData: {
	   
		 upfile_iframe: `<!doctype html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>upfile</title>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <style>
      html,body{height:100%;margin:0;padding:0;background:#fff;}
      ul{margin:0;padding:0;list-style:none;}
      #wrap{padding:10px;}
      #topbar{padding:10px 0;border-bottom:1px solid #ccc;text-align:right;}
    .tox *:not(svg):not(rect) {
      box-sizing: inherit;
      color: inherit;
      cursor: inherit;
      direction: inherit;
      font-family: inherit;
      font-size: inherit;
      font-style: inherit;
      font-weight: inherit;
      line-height: inherit;
      -webkit-tap-highlight-color: inherit;
      text-align: inherit;
      text-decoration: inherit;
      text-shadow: inherit;
      text-transform: inherit;
      vertical-align: inherit;
      white-space: inherit;
    }
    
    .tox *:not(svg):not(rect) {
      /* stylelint-disable-line no-duplicate-selectors */
      background: transparent;
      border: 0;
      float: none;
      height: auto;
      margin: 0;
      max-width: none;
      outline: 0;
      padding: 0;
      position: static;
      width: auto;
    }
    
    .tox .tox-form__group {
        box-sizing: border-box;
        margin-bottom: 4px;
    }
    .tox .tox-label, .tox .tox-toolbar-label {
        color: rgba(34,47,62,.7);
        display: block;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.3;
        padding: 0 8px 0 0;
        text-transform: none;
        white-space: nowrap;
    }
    .tox .tox-selectfield select, .tox .tox-textarea, .tox .tox-textfield, .tox .tox-toolbar-textfield {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: #fff;
        border-color: #ccc;
        border-radius: 3px;
        border-style: solid;
        border-width: 1px;
        box-shadow: none;
        box-sizing: border-box;
        color: #222f3e;
        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
        font-size: 16px;
        line-height: 24px;
        margin: 0;
        min-height: 34px;
        outline: 0;
        padding: 5px 4.75px;
        resize: none;
        width: 100%;
      }
    .tox .tox-dialog__body-content {
      box-sizing: border-box;
      display: flex;
      flex: 1;
      flex-direction: column;
      -ms-flex-preferred-size: auto;
      max-height: 650px;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      padding: 16px 16px;
    }
    .tox .tox-dialog__body-content {
      box-sizing: border-box;
      display: flex;
      flex: 1;
      flex-direction: column;
      -ms-flex-preferred-size: auto;
      max-height: 650px;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      padding: 16px 16px;
    }
    .tox .tox-dialog__body-content > * {
      margin-bottom: 0;
      margin-top: 16px;
    }
    .tox .tox-dialog__body-content > *:first-child {
      margin-top: 0;
    }
    .tox .tox-dialog__body-content > *:last-child {
      margin-bottom: 0;
    }
    .tox .tox-dialog__body-content > *:only-child {
      margin-bottom: 0;
      margin-top: 0;
    }
    .tox .tox-dialog__body-content a {
      color: #207ab7;
      cursor: pointer;
      text-decoration: none;
    }
    .tox .tox-dialog__body-content a:hover,
    .tox .tox-dialog__body-content a:focus {
      color: #185d8c;
      text-decoration: none;
    }
    .tox .tox-dialog__body-content a:active {
      color: #185d8c;
      text-decoration: none;
    }
    .tox .tox-dialog__body-content svg {
      fill: #222f3e;
    }
    
    .tox .tox-form__group--stretched {
      display: flex;
      flex: 1;
      flex-direction: column;
      -ms-flex-preferred-size: auto;
    }
    .tox .tox-form__group {
        box-sizing: border-box;
        margin-bottom: 4px;
    }
    .tox .tox-dropzone-container {
        display: flex;
        flex: 1;
    }
    
    element.style {
    }
    .tox .tox-dropzone {
        cursor: pointer;
        align-items: center;
        background: #fff;
        border: 2px dashed #ccc;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        justify-content: center;
        min-height: 100px;
        padding: 10px;
    }
    
    .tox .tox-button {
        background-color: #207ab7;
        background-image: none;
        background-position: 0 0;
        background-repeat: repeat;
        border-color: #207ab7;
        border-radius: 3px;
        border-style: solid;
        border-width: 1px;
        box-shadow: none;
        box-sizing: border-box;
        color: #fff;
        cursor: pointer;
        display: inline-block;
        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: normal;
        line-height: 24px;
        margin: 0;
        outline: 0;
        padding: 4px 16px;
        text-align: center;
        text-decoration: none;
        text-transform: capitalize;
        white-space: nowrap;
    }
    .tox .tox-button[disabled] {
      background-color: #207ab7;
      background-image: none;
      border-color: #207ab7;
      box-shadow: none;
      color: rgba(255, 255, 255, 0.5);
      cursor: not-allowed;
    }
    .tox .tox-button:focus:not(:disabled) {
      background-color: #1c6ca1;
      background-image: none;
      border-color: #1c6ca1;
      box-shadow: none;
      color: #fff;
    }
    .tox .tox-button:hover:not(:disabled) {
      background-color: #1c6ca1;
      background-image: none;
      border-color: #1c6ca1;
      box-shadow: none;
      color: #fff;
    }
    .tox .tox-button:active:not(:disabled) {
      background-color: #185d8c;
      background-image: none;
      border-color: #185d8c;
      box-shadow: none;
      color: #fff;
    }
    
    .tox .tox-button--secondary {
        background-color: #f0f0f0;
        background-image: none;
        background-position: 0 0;
        background-repeat: repeat;
        border-color: #f0f0f0;
        border-radius: 3px;
        border-style: solid;
        border-width: 1px;
        box-shadow: none;
        color: #222f3e;
        outline: 0;
        padding: 4px 16px;
        text-decoration: none;
        text-transform: capitalize;
    }
    .tox .tox-button--secondary[disabled] {
      background-color: #f0f0f0;
      background-image: none;
      border-color: #f0f0f0;
      box-shadow: none;
      cursor: pointer;
      color: rgba(34, 47, 62, 0.5);
    }
    .tox .tox-button--secondary:focus:not(:disabled) {
      background-color: #e3e3e3;
      background-image: none;
      border-color: #e3e3e3;
      box-shadow: none;
      color: #222f3e;
    }
    .tox .tox-button--secondary:hover:not(:disabled) {
      background-color: #e3e3e3;
      background-image: none;
      border-color: #e3e3e3;
      box-shadow: none;
      color: #222f3e;
    }
    .tox .tox-button--secondary:active:not(:disabled) {
      background-color: #d6d6d6;
      background-image: none;
      border-color: #d6d6d6;
      box-shadow: none;
      color: #222f3e;
    }
    </style>
    
    </head>
    <body>
    <div id="wrap">
      <ul id="file_list" class="tox">
            <div role="tabpanel" class="tox-dialog__body-content" style="height: 336px; flex-basis: 210px;" aria-labelledby="aria_5965197812761603939544315">
                <div class="tox-form">
                    <div class="tox-form__group">
                        <label class="tox-label" for="form-field_8471486645261603941857554">链接</label>
                        <div class="tox-form__controls-h-stack">
                          <div class="tox-control-wrap">
                              <input type="url" aria-errormessage="aria-invalid_348682591591603941621447" role="combobox" aria-autocomplete="list" aria-haspopup="true" tabindex="-1" data-alloy-tabstop="true" class="tox-textfield" aria-expanded="false" id="upFileUrlID">
                            </div>
                        </div>
                    </div>
                    <div class="tox-form__group">
                        <label class="tox-label" for="form-field_2497330145271603941857555">显示文字</label>
                         <input type="text" tabindex="-1" data-alloy-tabstop="true" class="tox-textfield" id="upFileTextID">
                    </div>
                    <div style="height: 10px;"></div>
                 <div class="tox-form__group tox-form__group--stretched">
                    <div class="tox-dropzone-container">
                        <div class="tox-dropzone">
                          <p style="margin: 10px auto;color:rgba(34,47,62,.7)">拖放一张文件至此</p>
                          <button id="upfileID" type="button" onclick="getFile()" data-alloy-tabstop="true" tabindex="-1" class="tox-button tox-button--secondary" style="position: relative; min-height: 30px; overflow: visible;">浏览文件<input type="file" accept="image/*" style="display: none;"></button>
                          <input id="upfileNameID" style="margin: 5px auto;font-size: 12px; color:rgba(34,47,62,.7); width: 300px; text-align: center;" type="text" value="">
                        </div>
                    </div>
                 </div>
                </div>
                <button title="上传文件" type="button" onclick="sendUpFile()" style="width: 80%;position: absolute;bottom:10px;left: 43px; margin: 0 auto;letter-spacing: 2px; display: block;"   class="tox-button"><svg width="24" height="24" style="margin-top:5px;" ><path fill="#fff" d="M19 4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4v-2h4V8H5v10h4v2H5a2 2 0 0 1-2-2V6c0-1.1.9-2 2-2h14zm-8 9.4l-2.3 2.3a1 1 0 1 1-1.4-1.4l4-4a1 1 0 0 1 1.4 0l4 4a1 1 0 0 1-1.4 1.4L13 13.4V20a1 1 0 0 1-2 0v-6.6z" fill-rule="nonzero"></path></svg><span style="top:-6px; position: relative; margin-left:5px;">开始上传</span></button>
          </div>
        </ul>
    </div>
    <script>
      var editor=parent.upfile.tinymce.activeEditor;
      var upfile=parent.upfile;
      var upload_handler = upfile.file_callback;
      typeof upload_handler == 'function'?'': editor 
      var upfileData = ""
      var upfileUrl = null
        function addFile(file){
         upfileData = file[0];
         document.getElementById('upfileNameID').value=file[0].name;
        }
        let inputUrl = document.getElementById('upFileUrlID');
        let inputText = document.getElementById('upFileTextID');
        function sendUpFile(){
          upload_handler(upfileData,function(url,_obj){
            inputUrl.value = url;
            inputText.value ?'': inputText.value = url;
            _obj&&_obj.text?inputText.value=_obj.text:'';
            upfile.res.url = upfileUrl = url;
            upfile.res.text = inputText.value;
    
          })
        }
    
        inputUrl.oninput = function(){upfile.res.url = inputUrl.value; upfileUrl=== null?inputText.value=inputUrl.value:'' }
        inputText.oninput = function(){upfile.res.text=inputText.value;upfileUrl="123";}
        //拖拽添加
        document.addEventListener('dragover', function(e){
            e.stopPropagation();
            e.preventDefault();
            e.dataTransfer.dropEffect = 'copy';
        });
        document.addEventListener('drop', function(e){
            e.stopPropagation();
            e.preventDefault();
            if(!e.dataTransfer.files){return false;}
            var dropfiles = e.dataTransfer.files;
            if(!(dropfiles.length>0)){return false;}
             addFile(dropfiles);
        });
        
        var global$1 = upfile.tinymce.util.Tools.resolve('tinymce.util.Promise');var global$2 = upfile.tinymce.util.Tools.resolve('tinymce.Env');var global$3 = upfile.tinymce.util.Tools.resolve('tinymce.util.Delay');
        var pickFile=function(a){return new global$1(function(e){var c=document.createElement("input");c.type="file";c.style.position="fixed";c.style.left="0";c.style.top="0";c.style.opacity="0.001";document.body.appendChild(c);var b=function(f){e(Array.prototype.slice.call(f.target.files))};c.addEventListener("change",b);var d=function(g){var f=function(){e([]);c.parentNode.removeChild(c)};if(global$2.os.isAndroid()&&g.type!=="remove"){global$3.setEditorTimeout(a,f,0)}else{f()}a.off("focusin remove",d)};a.on("focusin remove",d);c.click()})};
      function getFile(){
       
        pickFile(editor).then(function (files){
          addFile(files);
        })    
    }
    </script>
    </body>
    </html>
    `
	  },
	 
		buttons: [
			{
				type: 'cancel',
				text: 'Close'
			},
			{
				type: 'custom',
				text: 'Save',
				name: 'save',
				primary: true
			},
		],
	
			onAction: function (api, details) {
				
				switch (details.name) {
					case 'save':
						var res = upfile.res;
						var html = '<span  class="attachment" contenteditable="false"><a href="'+res.url+'" target="_blank" title="'+res.text+'" >'+res.text+'<a></span>';
						editor.insertContent(html);
						upfile.res={};
						api.close();
						break;
					default:
						break;
				}
				
			}
		});
	};

	editor.ui.registry.getAll().icons.upfile || editor.ui.registry.addIcon('upfile','<svg t="1603858123045" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2812" width="24" height="24"><path fill-rule="evenodd" fill="#000" d="M909 897H115a50 50 0 0 1-50-50V177a50 50 0 0 1 50-50h370a50 50 0 0 1 50 50v62a10 10 0 0 0 10 10h241a50 50 0 0 1 50 50v58h73a50 50 0 0 1 50 50v440a50 50 0 0 1-50 50zM505 309a30 30 0 0 1-30-30v-72a20 20 0 0 0-20-20H145a20 20 0 0 0-20 20v610c0 11.046 9.377 20 20.422 20H209a20 20 0 0 0 20-20V407a50 50 0 0 1 50-50h497v-28a20 20 0 0 0-20-20H535m364 128a20 20 0 0 0-20-20H309a20 20 0 0 0-20 20v400h590a20 20 0 0 0 20-20V437zM650.659 615.8l-26.618-26.53V737a30 30 0 0 1-30 30h-0.113a30 30 0 0 1-30-30V589.275L537.309 615.8a30.006 30.006 0 0 1-42.509-42.36l77.928-77.669a30.127 30.127 0 0 1 42.506 0l77.929 77.669a30.007 30.007 0 0 1-42.504 42.36z" p-id="2813"></path></svg>');
	editor.ui.registry.addButton('upfile', {
	  icon: 'upfile',
    tooltip: pluginName,
		onAction: function() {
      openDialog()
     let fv_doc = document.querySelector('iframe[srcdoc]').style.height = '360px';
      
		}
	});
	editor.ui.registry.addMenuItem('upfile', {
		icon: 'upfileicon',
		text: '图片上传...',
		onAction: function() {
    openDialog()
    document.querySelector('iframe[srcdoc]').style.height = '360px'
		}
	});
	return {
		getMetadata: function() {
			return  {
				name: pluginName,
				url: "https://github.com/Five-great/tinymce-plugins",
			};
		}
	};
});
