qzyReal
/
zhbsq-vue-web


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368
							<!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">
    <!-- <div id="topbar"><button class="addfile primary">+ 添加文件</button> -->
        <!-- <button class="upall primary">全部上传</button>
        <button class="removeall">清空列表</button></div> -->
	<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: 55px; 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.tinymce.activeEditor;
	var upfile=parent.upfile;
	var upload_handler = upfile.file_callback;
  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>