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

查看 64|回复 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大军,楼主是好人
您需要登录后才可以回帖 登录 | 立即注册

返回顶部