美国VPS综合讨论

本论坛图片粘贴到编辑框插件，再也不用担心图片看不清了 只看楼主

每次看到用户使用论坛的图片模糊不清就心痛，加上使用图床还是太麻烦，超级麻烦，那有什么方便的方式呢？
有，就如Github那样，用户截图或者复制图片后直接粘贴到文本框就行了，不需要额外的步骤

技术原理：用户主动粘贴图片到文本框时，文本框读取图片，然后自动上传到图床
支持工具：Chrome、Edge浏览器
实现效果：如图，另外代码中的图床可以换成任何支持接口的图床


【使用方式】
1、任意地方新建一个文件夹，在该文件夹下新建两个文件：manifest.json、hostloc.js，把对应的源码保存进去
2、进入浏览器的扩展管理，打开【开发人员模式】按钮，点击【加载解压缩的扩展】，选择刚刚新建的文件夹，选择该文件夹
Chrome打开扩展管理：chrome://extensions/
Edge打开扩展管理：edge://extensions/

manifest.json 源码文件内容如下：
  1. {
  2.   "name": "hostloc论坛图片粘贴插件",
  3.   "version": "1.0",
  4.   "content_scripts": [
  5.     {
  6.       "matches": [
  7.         "https://52.ht/*"
  8.       ],
  9.       "js": [
  10.         "hostloc.js"
  11.       ]
  12.     }
  13.   ],
  14.   "manifest_version": 3
  15. }
  • 2# HOH
  • 2024-1-4 16:47:58
没有懒到这个程度，不需要
  • 3# pag
  • 2024-1-4 16:48:17
hostloc.js 源码文件内容如下：
  1. const allTextarea = document.querySelectorAll('textarea');
  2. allTextarea.forEach((textarea) => {
  3.     textarea.addEventListener('paste', clipboardEvent);
  4. });
  5. function clipboardEvent(event) {
  6.     const clipboardItems = event.clipboardData.items;
  7.     for (const clipboardItem of clipboardItems) {
  8.         if (clipboardItem.type.indexOf('image') != -1) {
  9.             const parentDiv = this.parentElement;
  10.             if (parentDiv.querySelectorAll('hr').length == 0) parentDiv.appendChild(document.createElement('hr'));
  11.             const tips = document.createElement('div');
  12.             tips.innerText = '正在上传图片，请稍等... ...';
  13.             parentDiv.appendChild(tips);
  14.             const echoDiv = document.createElement('div');
  15.             parentDiv.appendChild(echoDiv);
  16.             const rows = this.getAttribute('rows');

  18.             const imageFile = clipboardItem.getAsFile();
  19.             const formData = new FormData();
  20.             formData.append('image', imageFile);
  21.             const xhr = new XMLHttpRequest();
  22.             xhr.open('POST', 'https://tucdn.wpon.cn/api/upload', true);
  23.             xhr.onreadystatechange = () => {
  24.                 if (xhr.readyState === 4 && xhr.status === 200) {
  25.                     const cursorPos = this.selectionStart;
  26.                     const textBefore = this.value.substring(0, cursorPos);
  27.                     const textAfter = this.value.substring(cursorPos);
  28.                     let insertText = '';
  29.                     const result = JSON.parse(xhr.responseText);
  30.                     if (result.code === 200) {
  31.                         insertText = `\n[img]${result.data.url}[/img]\n`;
  32.                         echoDiv.innerHTML = `<a class="xi2" target="_blank" href="${result.data.url}">${result.data.url} 查看</a>`;
  33.                     } else {
  34.                         insertText = `\n[img]${result.msg}[/img]\n`;
  35.                     }
  36.                     this.value = textBefore + insertText + textAfter;
  37.                     this.selectionStart = cursorPos + insertText.length;
  38.                     this.selectionEnd = cursorPos + insertText.length;
  39.                     if (rows) this.setAttribute('rows', parseInt(rows) + 2);
  40.                     tips.remove();
  41.                 }
  42.             };
  43.             xhr.send(formData);
  44.         }
  45.     }
  46. }
  47. const observer = new MutationObserver(function (mutationsList) {
  48.     for (const mutation of mutationsList) {
  49.         if (mutation.type === 'childList') {
  50.             const allTextarea = document.querySelectorAll('#append_parent textarea');
  51.             allTextarea.forEach((textarea) => {
  52.                 textarea.addEventListener('paste', clipboardEvent);
  53.             });
  54.         }
  55.     }
  56. });
  57. observer.observe(document.getElementById('append_parent'), {childList: true, subtree: true});
“就心痛”……楼主心怀mjj大军，楼主是好人
首页 | 登录 | 注册
简易版 | 触屏版 | 电脑版 |

Language Index Page