上传图片并一键插入BBCode图片代码
// ==UserScript==
// @name 水墨图床妖火快捷上传插件
// @namespace https://img.ink/
// @version 0.25
// @description 上传图片并一键插入BBCode图片代码
// @author You
// @match *://yaohuo.me/*
// @match *://*.yaohuo.me/*
// @icon https://img.ink/favicon.ico
// @run-at document-end
// @grant none
// @require https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js
// @require https://cdn.staticfile.org/layui/2.8.2/layui.min.js
// @require https://cdn.staticfile.org/layer/3.5.1/layer.min.js
// ==/UserScript==
var token = ''; //这里输入你的token，如果希望以游客身份上传，请留空。
//token获取方式：进入https://img.ink/user/settings.html，第四行即是token，复制粘贴到上方即可
//示例： 原本的 '' 修改为 '25d9e338dd539b8f5cb222d8e662be5d'
//即在''中添加即可
(function() {
'use strict';
// 在<head>标签内插入layui CSS
const layuiCssLink = '<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.8.2/css/layui.min.css"><link rel="stylesheet" href="https://cdn.staticfile.org/layer/3.5.1/mobile/need/layer.min.css">';
// 在<head>标签内插入layui CSS
$('link[href="/template/default/xqx.css"]').before(layuiCssLink);
$('head').append(layuiCssLink);
// 添加样式
const style = `
<style>
body {
font: inherit !important;
line-height: 32px !important;
margin: 0 auto;
}
.container {
display: flex;
}
.textarea-container {
width: 70%;
}
.upload-container {
width: 30%;
display: flex;
align-items: center; // 垂直居中
justify-content: center; // 水平居中
}
.layui-upload-drag {
height: 80px;
padding: 0;
line-height: 1;
}
.textarea-container textarea {
width: 100%;
}
a {
color: #3d68a8 !important;
text-decoration: none !important;
font-size: 17px !important;
}
div.justify5213 {
letter-spacing: .7px;
overflow: hidden;
height: 31px;
padding: 5px 0 0 5px;
}
div.justify5213 > span {
display: inline-block;
padding-left: 100%;
}
a.topic-link:visited, div.list a:visited {
color: #A3A3A3 !important;
}
.border-solid img {
border: 1px solid #d3d3d3 !important;
}
.border-solid2 img {
border: 2px solid #d3d3d3 !important;
max-width: 99% !important;
}
.listdata img {
padding-right: 0.1em !important;
}
.number {
line-break: auto !important;
}
@font-face {
font-family: "LxgwWenKai";
font-display: swap;
src: url(./css/font/LXGWWenKai5.ttf);
}
.LXGW {
text-align: center;
font: 21px/2.2 'LxgwWenKai';
font-weight: 700;
}
.LxgwWenKai {
font-family: "LxgwWenKai" !important;
}
</style>
`;
// 添加拖拽上传HTML
const uploadHtml = `
<div class="upload-container">
<div class="layui-upload-drag" id="uploadDrag">
<i class="layui-icon"></i>
<p>点击上传，或将图片拖拽到此处</p>
</div>
</div>
`;
// 调整输入框高度
const uploadContainerHeight = $('.upload-container .layui-upload-drag').outerHeight();
$('.textarea-container textarea').css('height', uploadContainerHeight + 'px');
$('head').append(style);
$('.retextarea').wrap('<div class="container"></div>');
$('.retextarea').wrap('<div class="textarea-container"></div>');
$(uploadHtml).insertAfter('.textarea-container');
const creditText = `
<div style="font-size: 9px; color: #888; text-align: center; margin-top: 8px;">
图片上传接口由
<a href="https://img.ink/" target="_blank" style="font-weight: bold; color: #888;">
水墨图床
</a>
提供
</div>
`;
$('.container').after(creditText);
const layer = layui.layer;
layui.use('upload', function () {
var upload = layui.upload;
var element = layui.element;
upload.render({
elem: '#uploadDrag',
url: 'https://img.ink/api/upload',
accept: 'images',
acceptMime: '.jpg,.jpeg,.gif,.png,.ico,.bmp',
multiple: true,
field: ['image'],
exts: 'jpg|jpeg|gif|png|ico|bmp',
headers: token ? {'token': token} : {},
done: function (res) {
if (res.code === 200) {
const bbcode = `[img]${res.data.url}[/img]\n`;
const $textarea = $('textarea[name="content"]');
$textarea.val($textarea.val() + bbcode);
} else {
layer.msg('上传失败：' + res.msg);
}
},
error: function () {
layer.msg('上传失败');
},
});
});
})();
(function() {
'use strict';
$(document).ready(function() {
// 调整输入框高度
setTimeout(function() {
const uploadContainerHeight = $('.upload-container .layui-upload-drag').outerHeight();
$('.textarea-container textarea').css('height', uploadContainerHeight + 'px');
$('.textarea-container textarea').css('width', '100%');
}, 500);
});
})();