<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>图片粘贴</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        #img {
            width: 500px;
        }
    </style>
    <img id="img" src="" alt="">
    通过Ctrl + v将图片粘贴
    <button onclick="addImageText()">点击</button>
    <textarea name="nn" id="a" cols="30" rows="10"></textarea>

    <div class="CodeMirror-code">
        <div>1</div>
        <div>1</div>
        <div>5</div>
        <div>2</div>
        <div>3</div>
        <div class="CodeMirror-activeline" style="position: relative;">
            <div class="CodeMirror-activeline-background CodeMirror-linebackground"></div>
            <pre class="">
                <span style="padding-right: 0.1px;">
                    <span class="cm-cm-overlay cm-matchhighlight">-陈-123-abc-</span>
                </span>
            </pre>
        </div>
    </div>
</head>

<body>
    <script>
        const imageUploadUrl = 'https://upload.chfwork.cloud:8080';
        axios.defaults.baseURL = imageUploadUrl;
        var imageUrl;
        function imageUpload(file) {
            let image = new FormData()
            image.append('file', file, 'image.png')
            axios.post("/group1/upload?output=json&scene=&path=", image, {
                headers: {
                    'Content-Type': 'multipart/form-data',
                }
            })
                .then(function (response) {
                    imageUrl = imageUploadUrl + response.data.path
                    console.log(imageUrl);
                    copyToClickBoard(imageUrl);
                })
                .catch(function (error) {
                    console.log("请求失败");
                    console.log(error);
                })
        }
        setPasteImg();
        //获取粘贴板上的图片
        function setPasteImg() {
            //粘贴事件
            document.addEventListener('paste', function (event) {
                if (event.clipboardData || event.originalEvent) {
                    var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
                    if (clipboardData.items) {
                        var blob;
                        for (var i = 0; i < clipboardData.items.length; i++) {
                            if (clipboardData.items[i].type.indexOf("image") !== -1) {
                                blob = clipboardData.items[i].getAsFile();
                            }
                        }

                        if (blob && document.getElementsByClassName("CodeMirror-activeline")) {
                            imageUpload(blob);
                        }
                    }

                }

            })
        }

        function copyToClickBoard(content) {
            if (!navigator.clipboard) {
                var ele = document.createElement("input");
                ele.value = '![](' + content + ')';
                document.body.appendChild(ele);
                ele.select();
                document.execCommand("copy");
                document.body.removeChild(ele);
                if (document.execCommand("copy")) {
                    alert("复制成功1")
                } else {
                    console.log("复制失败1！");
                }
            } else {
                navigator.clipboard.writeText('![](' + content + ')')
                    .then(() => {
                        alert("复制成功2")
                    })
                    .catch(err => {
                        console.log('复制失败2', err);
                    })
            }

        }

        function addImageText() {
            let ac = document.getElementsByClassName("CodeMirror-activeline")[0];
            let pre = ac.getElementsByTagName("pre")[0];
            let t = pre.getElementsByTagName("span")[0]
            let t1 = t.getElementsByTagName("span")[0]
            t1.innerHTML = t1.innerText + imageUrl
        }

    </script>
</body>

<html>