You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
368 lines
12 KiB
368 lines
12 KiB
<!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>
|
|
|