first commit
This commit is contained in:
@@ -0,0 +1 @@
|
||||
require('./plugin.js');
|
||||
@@ -0,0 +1,80 @@
|
||||
/**
|
||||
* 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={}; //扔外部公共变量,也可以扔一个自定义的位置
|
||||
|
||||
var baseURL=tinymce.baseURL||'.';
|
||||
var iframe1 = baseURL+'/plugins/upfile/upfiles.html';
|
||||
upfile.file_callback = editor.getParam('file_callback', undefined, 'function');
|
||||
upfile.tinymce = tinymce;
|
||||
upfile.res={};
|
||||
var openDialog = function() {
|
||||
return editor.windowManager.openUrl({
|
||||
title: pluginName,
|
||||
size: 'large',
|
||||
width: 450,
|
||||
height: 450,
|
||||
url:iframe1,
|
||||
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 viewBox="0 0 1280 1024" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M1126.2,779.8V87.6c0-24-22.6-86.9-83.5-86.9H83.5C14.7,0.7,0,63.7,0,87.7v692c0,36.2,29.2,89.7,83.5,89.7l959.3-1.3c51.7,0,83.5-42.5,83.5-88.3zm-1044,4V86.3h961.6V783.7H82.2v0.1z" fill="#53565A"/><path d="M603,461.6L521.1,366.3,313,629.8,227.2,546.8,102.4,716.8H972.8v-170L768.2,235.2,603.1,461.6zM284.6,358.4a105.4,105.4,0,0,0,73.5-30c19.5-19.1,30.3-45,30.2-71.8,0-56.8-45.9-103-102.4-103-56.6,0-102.4,46.1-102.4,103C183.4,313.5,228,358.4,284.6,358.4z" fill="#9598A0"/><path d="M1197.7,153.6l-0.3,669.3s13.5,113.9-67.4,113.9H153.6c0,24.1,23.9,87.2,83.5,87.2h959.3c58.3,0,83.6-49.5,83.6-89.9V240.8c-0.1-41.8-44.9-87.2-82.3-87.2z" fill="#53565A"/></svg>');
|
||||
|
||||
editor.ui.registry.addButton('upfile', {
|
||||
icon: 'upfile',
|
||||
tooltip: pluginName,
|
||||
onAction: function() {
|
||||
openDialog();
|
||||
}
|
||||
});
|
||||
editor.ui.registry.addMenuItem('upfile', {
|
||||
icon: 'upfile',
|
||||
text: '图片上传...',
|
||||
onAction: function() {
|
||||
openDialog();
|
||||
}
|
||||
});
|
||||
return {
|
||||
getMetadata: function() {
|
||||
return {
|
||||
name: pluginName,
|
||||
url: "https://github.com/Five-great/tinymce-plugins",
|
||||
};
|
||||
}
|
||||
};
|
||||
});
|
||||
@@ -0,0 +1,13 @@
|
||||
/**
|
||||
* 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(a,f){window.upfile={};var d=(tinymce.baseURL||".")+"/plugins/upfile/upfiles.html";upfile.file_callback=a.getParam("file_callback",void 0,"function");upfile.tinymce=tinymce;upfile.res={};var c=function(){return a.windowManager.openUrl({title:"\u4e0a\u4f20\u6587\u4ef6",size:"large",width:450,height:450,url:d,buttons:[{type:"cancel",text:"Close"},{type:"custom",text:"Save",name:"save",primary:!0}],onAction:function(e,b){switch(b.name){case "save":b=upfile.res,
|
||||
a.insertContent('<span class="attachment" contenteditable="false"><a href="'+b.url+'" target="_blank" title="'+b.text+'" >'+b.text+"<a></span>"),upfile.res={},e.close()}}})};a.ui.registry.getAll().icons.upfile||a.ui.registry.addIcon("upfile",'<svg viewBox="0 0 1280 1024" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M1126.2,779.8V87.6c0-24-22.6-86.9-83.5-86.9H83.5C14.7,0.7,0,63.7,0,87.7v692c0,36.2,29.2,89.7,83.5,89.7l959.3-1.3c51.7,0,83.5-42.5,83.5-88.3zm-1044,4V86.3h961.6V783.7H82.2v0.1z" fill="#53565A"/><path d="M603,461.6L521.1,366.3,313,629.8,227.2,546.8,102.4,716.8H972.8v-170L768.2,235.2,603.1,461.6zM284.6,358.4a105.4,105.4,0,0,0,73.5-30c19.5-19.1,30.3-45,30.2-71.8,0-56.8-45.9-103-102.4-103-56.6,0-102.4,46.1-102.4,103C183.4,313.5,228,358.4,284.6,358.4z" fill="#9598A0"/><path d="M1197.7,153.6l-0.3,669.3s13.5,113.9-67.4,113.9H153.6c0,24.1,23.9,87.2,83.5,87.2h959.3c58.3,0,83.6-49.5,83.6-89.9V240.8c-0.1-41.8-44.9-87.2-82.3-87.2z" fill="#53565A"/></svg>');
|
||||
a.ui.registry.addButton("upfile",{icon:"upfile",tooltip:"\u4e0a\u4f20\u6587\u4ef6",onAction:function(){c()}});a.ui.registry.addMenuItem("upfile",{icon:"upfile",text:"\u56fe\u7247\u4e0a\u4f20...",onAction:function(){c()}});return{getMetadata:function(){return{name:"\u4e0a\u4f20\u6587\u4ef6",url:"https://github.com/Five-great/tinymce-plugins"}}}});
|
||||
@@ -0,0 +1,416 @@
|
||||
<!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 = upfileData.name; // 回写文件名而不是URL
|
||||
upfile.res.url = upfileUrl = url;
|
||||
upfile.res.text = inputText.value;
|
||||
});
|
||||
}
|
||||
|
||||
inputUrl.oninput = function() {
|
||||
upfile.res.url = inputUrl.value;
|
||||
if (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>
|
||||
Reference in New Issue
Block a user