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

pag

每次看到用户使用论坛的图片模糊不清就心痛，加上使用图床还是太麻烦，超级麻烦，那有什么方便的方式呢？
有，就如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://hostloc.com/*"
   
8.       ],
   
9.       "js": [
   
10.         "hostloc.js"
    
11.       ]
    
12.     }
    
13.   ],
    
14.   "manifest_version": 3
    
15. }

复制代码

HOH

没有懒到这个程度，不需要

pag

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');
    
17. 
    
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大军，楼主是好人