js实现自带粘贴

实现粘贴功能的JavaScript方法

使用JavaScript监听粘贴事件并处理剪贴板内容，可以通过以下方式实现：

document.addEventListener('paste', function(event) {
    const clipboardItems = event.clipboardData.items;
    for (let i = 0; i < clipboardItems.length; i++) {
        const item = clipboardItems[i];
        if (item.kind === 'string' && item.type === 'text/plain') {
            item.getAsString(function(text) {
                console.log('粘贴的文本内容:', text);
                // 处理文本内容
            });
        }
        else if (item.kind === 'file') {
            const blob = item.getAsFile();
            console.log('粘贴的文件:', blob);
            // 处理文件内容
        }
    }
});

处理HTML格式的粘贴内容

当需要保留粘贴内容的格式时，可以获取HTML格式的数据：

document.addEventListener('paste', function(e) {
    const html = e.clipboardData.getData('text/html');
    if (html) {
        console.log('带格式的内容:', html);
        // 插入到富文本编辑器等场景
    }
});

限制粘贴内容的类型

通过检查剪贴板数据的类型，可以限制只允许特定内容粘贴：

document.getElementById('inputField').addEventListener('paste', function(e) {
    const types = e.clipboardData.types;
    if (!types.includes('text/plain')) {
        e.preventDefault();
        alert('只允许粘贴纯文本');
    }
});

富文本编辑器的粘贴处理

在富文本编辑器场景中，通常需要清理粘贴的HTML内容：

document.querySelector('.editor').addEventListener('paste', function(e) {
    e.preventDefault();
    const text = e.clipboardData.getData('text/plain');
    document.execCommand('insertText', false, text);
});

处理图片粘贴

从剪贴板获取图片数据并显示：

document.addEventListener('paste', function(e) {
    const items = e.clipboardData.items;
    for (let item of items) {
        if (item.type.indexOf('image') !== -1) {
            const blob = item.getAsFile();
            const reader = new FileReader();
            reader.onload = function(event) {
                const img = new Image();
                img.src = event.target.result;
                document.body.appendChild(img);
            };
            reader.readAsDataURL(blob);
        }
    }
});

安全注意事项

处理粘贴内容时应当考虑安全性，对用户输入进行适当的清理和验证，防止XSS攻击。使用DOMPurify等库可以安全地处理HTML内容：

import DOMPurify from 'dompurify';

document.addEventListener('paste', function(e) {
    const dirty = e.clipboardData.getData('text/html');
    const clean = DOMPurify.sanitize(dirty);
    // 使用清理后的内容
});

这些方法覆盖了从基础文本粘贴到复杂内容处理的常见场景，可以根据具体需求选择适合的实现方式。