Telegraph 增加对 html md bbc 支持

本文最后更新于 86 天前，其中的信息可能已经有所发展或是发生改变。

嘿大家好！今天我要和你们分享一个超酷的小脚本，能让你轻松生成Markdown、BBCode和HTML格式的图片链接。不用谢，都是我应该做的！

这个神奇的脚本会等着你输入图片的URL，然后自动生成不同格式的图片链接，并且一键复制，简直就是懒人福音啊！

脚本演示

首先，来看一下这个神奇的脚本长什么样子：在线演示。

是不是超级酷炫？下面我来解释一下每一行代码的奥妙所在。

代码解析

<!doctype html>
<html data-n-head-ssr>
  <script>
  // 等待整个文档加载完毕
document.addEventListener('DOMContentLoaded', function() {
    var lastInputValue = ''; // 用于存储上一次输入框的值
    var timer; // 用于存储定时器的引用

    // 等待输入框元素生成
    var waitForElement = setInterval(function() {
        var inputElement = document.getElementById('url-content');
        if (inputElement) {
            var url = inputElement.value.trim(); // 获取输入框的值
            if (url !== '' && url !== lastInputValue) {
                lastInputValue = url; // 更新上一次输入框的值

                var altText = url.split('/').pop(); // 获取图片链接的最后一部分作为 Alt Text
                var markdownImage = `![${altText}](${url})`;
                var bbcodeImage = `[img]${url}[/img]`;
                var htmlImage = `<img src="${url}" alt="${altText}">`;
                console.log('生成的 Markdown 格式的图片链接：', markdownImage);
                console.log('生成的 BBCode 格式的图片链接：', bbcodeImage);
                console.log('生成的 HTML 格式的图片链接：', htmlImage);

                // 检查并删除已有的输入框和按钮
                var existingMarkdownDiv = document.querySelector('.markdown-container');
                if (existingMarkdownDiv) {
                    existingMarkdownDiv.remove();
                }

                // 创建包含链接和复制文本按钮的新元素
                var newDiv = document.createElement('div');
                newDiv.classList.add('markdown-container');
                newDiv.style.display = 'flex'; // 设置样式
                newDiv.style.alignItems = 'center';
                newDiv.style.marginBottom = '10px';
                newDiv.style.flexDirection = 'column'; // 垂直排列

                // 创建显示链接的文本框元素
                var createLinkElement = function(format, value) {
                    var containerDiv = document.createElement('div');
                    containerDiv.style.display = 'flex'; // 设置样式
                    containerDiv.style.alignItems = 'center';
                    containerDiv.style.marginBottom = '5px';

                    var linkInput = document.createElement('input');
                    linkInput.setAttribute('type', 'text');
                    linkInput.setAttribute('readonly', 'readonly');
                    linkInput.value = value; // 将链接赋值给文本框
                    linkInput.style.flexGrow = '1'; // 设置样式
                    linkInput.style.marginRight = '10px';
                    linkInput.style.padding = '5px';
                    linkInput.style.border = '1px solid #ccc';
                    linkInput.style.borderRadius = '4px';

                    var copyButton = document.createElement('span');
                    copyButton.textContent = `复制${format}`;
                    copyButton.style.padding = '5px 10px'; // 设置样式
                    copyButton.style.backgroundColor = '#007bff';
                    copyButton.style.color = 'white';
                    copyButton.style.border = 'none';
                    copyButton.style.borderRadius = '4px';
                    copyButton.style.cursor = 'pointer';
                    copyButton.style.minWidth = '80px'; // 设置最小宽度
                    copyButton.style.textAlign = 'center'; // 居中文字
                    copyButton.addEventListener('click', function() {
                        // 复制文本按钮的点击事件处理函数
                        linkInput.select();
                        document.execCommand('copy');
                        copyButton.textContent = '已复制';
                        copyButton.style.pointerEvents = 'none'; // 禁用按钮点击
                        console.log('已复制文本:', linkInput.value);

                        // 2秒后将按钮文本恢复为“复制<format>”
                        setTimeout(function() {
                            copyButton.textContent = `复制${format}`;
                            copyButton.style.pointerEvents = 'auto'; // 允许按钮再次点击
                        }, 2000);
                    });
                    copyButton.addEventListener('mouseover', function() {
                        copyButton.style.backgroundColor = '#0056b3'; // 悬停样式
                    });
                    copyButton.addEventListener('mouseout', function() {
                        copyButton.style.backgroundColor = '#007bff'; // 恢复原样式
                    });

                    containerDiv.appendChild(linkInput);
                    containerDiv.appendChild(copyButton);

                    return containerDiv;
                };

                newDiv.appendChild(createLinkElement('Markdown', markdownImage));
                newDiv.appendChild(createLinkElement('BBCode', bbcodeImage));
                newDiv.appendChild(createLinkElement('HTML', htmlImage));

                // 获取要插入新元素的位置（通过类名获取元素）
                var urlBoxElements = document.querySelectorAll('.url-box[data-v-793b8fc8=""]');
                if (urlBoxElements.length > 0) {
                    // 获取第一个匹配的元素并在其之前插入新创建的 div
                    var urlBox = urlBoxElements[0];
                    urlBox.parentNode.insertBefore(newDiv, urlBox);
                } else {
                    console.error('未找到类名为 url-box 且 data-v-793b8fc8 属性为空的元素！');
                }
            }

            // 如果定时器存在，则清除定时器
            if (timer) {
                clearTimeout(timer);
            }

            // 设置2分钟后关闭定时器
            timer = setTimeout(function() {
                clearInterval(waitForElement); // 停止等待输入框元素的检查
                console.log('定时器已关闭');
            }, 2 * 60 * 1000); // 2分钟，单位是毫秒
        }
    }, 1000); // 每1000毫秒检查一次是否生成了输入框元素
});
</script>

整个脚本到底干了啥？

等待文档加载完毕：这段代码确保脚本在整个HTML文档加载完毕后执行，不会因为页面未加载完而报错。
获取并检查输入框：每秒检查一次是否存在ID为url-content的输入框，如果找到则继续处理。
生成链接：从输入的URL生成Markdown、BBCode和HTML格式的图片链接。
动态创建元素：创建新的div容器，包含三个格式的文本框和对应的复制按钮。
添加事件处理：为每个复制按钮添加点击、悬停和离开事件，点击后可以一键复制对应格式的链接。
插入新元素：在指定的位置插入新创建的div。

快来体验！

直接点击这里试试这个神器吧！有问题或建议，欢迎加入我的Telegram群一起讨论：加入Telegram群。
完整html在这里直接替换

脚本演示

代码解析

整个脚本到底干了啥？

快来体验！

评论

发送评论编辑评论

脚本演示

代码解析

整个脚本到底干了啥？

快来体验！

评论

发送评论 编辑评论

发送评论编辑评论