Yoo趣儿

Yoo趣儿 › 后端服务 › 服务器 › 本论坛图片粘贴到编辑框插件，再也不用担心图片看不清了 ...

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

查看 63|回复 3
作者：pag   
每次看到用户使用论坛的图片模糊不清就心痛，加上使用图床还是太麻烦，超级麻烦，那有什么方便的方式呢？
有，就如Github那样，用户截图或者复制图片后直接粘贴到文本框就行了，不需要额外的步骤
技术原理：用户主动粘贴图片到文本框时，文本框读取图片，然后自动上传到图床
支持工具：Chrome、Edge浏览器
实现效果：如图，另外代码中的图床可以换成任何支持接口的图床

【使用方式】
1、任意地方新建一个文件夹，在该文件夹下新建两个文件：manifest.json、hostloc.js，把对应的源码保存进去
2、进入浏览器的扩展管理，打开【开发人员模式】按钮，点击【加载解压缩的扩展】，选择刚刚新建的文件夹，选择该文件夹
Chrome打开扩展管理：chrome://extensions/
Edge打开扩展管理：edge://extensions/
manifest.json 源码文件内容如下：
[ol]{
  "name": "hostloc论坛图片粘贴插件",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": [
        "https://91ai.net/*"
      ],
      "js": [
        "hostloc.js"
      ]
    }
  ],
  "manifest_version": 3
}[/ol]复制代码

图片, 文件夹, 文本框

相关帖子

HOH   
没有懒到这个程度，不需要
pag
OP
  
hostloc.js 源码文件内容如下：
[ol]const allTextarea = document.querySelectorAll('textarea');
allTextarea.forEach((textarea) => {
    textarea.addEventListener('paste', clipboardEvent);
});
function clipboardEvent(event) {
    const clipboardItems = event.clipboardData.items;
    for (const clipboardItem of clipboardItems) {
        if (clipboardItem.type.indexOf('image') != -1) {
            const parentDiv = this.parentElement;
            if (parentDiv.querySelectorAll('hr').length == 0) parentDiv.appendChild(document.createElement('hr'));
            const tips = document.createElement('div');
            tips.innerText = '正在上传图片，请稍等... ...';
            parentDiv.appendChild(tips);
            const echoDiv = document.createElement('div');
            parentDiv.appendChild(echoDiv);
            const rows = this.getAttribute('rows');
            const imageFile = clipboardItem.getAsFile();
            const formData = new FormData();
            formData.append('image', imageFile);
            const xhr = new XMLHttpRequest();
            xhr.open('POST', 'https://tucdn.wpon.cn/api/upload', true);
            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    const cursorPos = this.selectionStart;
                    const textBefore = this.value.substring(0, cursorPos);
                    const textAfter = this.value.substring(cursorPos);
                    let insertText = '';
                    const result = JSON.parse(xhr.responseText);
                    if (result.code === 200) {
                        insertText = `\n\n`;
                        echoDiv.innerHTML = `[url=]${result.data.url} 查看[/url]`;
                    } else {
                        insertText = `\n\n`;
                    }
                    this.value = textBefore + insertText + textAfter;
                    this.selectionStart = cursorPos + insertText.length;
                    this.selectionEnd = cursorPos + insertText.length;
                    if (rows) this.setAttribute('rows', parseInt(rows) + 2);
                    tips.remove();
                }
            };
            xhr.send(formData);
        }
    }
}
const observer = new MutationObserver(function (mutationsList) {
    for (const mutation of mutationsList) {
        if (mutation.type === 'childList') {
            const allTextarea = document.querySelectorAll('#append_parent textarea');
            allTextarea.forEach((textarea) => {
                textarea.addEventListener('paste', clipboardEvent);
            });
        }
    }
});
observer.observe(document.getElementById('append_parent'), {childList: true, subtree: true});[/ol]复制代码
浪漫一生   
“就心痛”……楼主心怀mjj大军，楼主是好人
返回列表
您需要登录后才可以回帖 登录 | 立即注册

AD1

热门主题

热门板块

问与答分享发现分享创造奇思妙想分享邀请码商业推广优惠信息PythonPHPJavaJavaScriptNode.jsGo语言C++HTML

公告

标签|小黑屋|Yoo趣儿

GMT+8, 2024-11-22 18:03 , Processed in 0.150423 second(s), 10 queries , Gzip On, MemCached On.

Powered by Discuz! X3.2

The happiest thing in the world is to strive for an ideal.

返回顶部