复制到剪贴板并以HTML 格式粘贴

PanDa____

已于 2023-12-19 16:17:35 修改

阅读量624

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2022-05-11 14:31:28 首次发布

本文链接：https://blog.csdn.net/panda____/article/details/124709361

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、复制至剪贴板

<div class="commonRow">
    <p class="linkText">想要复制的内容<p>
    <span onclick="copyText(this)">复制</span>
<div>

  function copyText(e){
        var text = $(e).parents('.commonRow').find('.linkText').text();
        var flag = copy(text);
        alert(flag ? "复制成功！" : "复制失败！");
    }
   
    function copy(text) {
        var textarea = document.createElement("textarea");
        var currentFocus = document.activeElement;
        document.body.appendChild(textarea);
        textarea.value = text;
        textarea.focus();
        if (textarea.setSelectionRange)
            textarea.setSelectionRange(0, textarea.value.length);
        else
            textarea.select();
        try {
            var flag = document.execCommand("copy");
        } catch (eo) {
            var flag = false;
        }
        document.body.removeChild(textarea);
        currentFocus.focus();
        return flag;
    }

二、粘贴剪贴板内容

当复制至剪贴板内容为文本加html格式时，粘贴出来的效果很容易是如下效果：

但我们想要图片正常显示，如下图效果

 //监听div粘贴事件
        $('body').on('paste', '.textareaDiv', function (e) {
            e.preventDefault();
            if (e.originalEvent.clipboardData) {
                var clp = e.originalEvent.clipboardData;
                paste = clp.getData('text/plain') || "";
                if (paste !== "") {
                    document.execCommand('insertHTML', false, paste);
                }
            }
        });