时间戳

首页 > 解决方案 > 粘贴到 contentEditable div 时如何保留 onclick

javascript - 粘贴到 contentEditable div 时如何保留 onclick

问题描述

我有一个链接和一个 contentEditable div。该链接有一个onclick属性。当我复制链接并将其粘贴到 contentEditable div 中时，该onclick属性已被删除。无论如何要保留 contentEditable 中的属性？

细节

描述

片段

<html>
    <head>
    </head>
    <body>
      <a href="#" onclick="handleClick()">Click me</a>
      <div
          style="border: 1px solid black; min-width: 100px;"
          contenteditable="true">
      </div>
      <script>
        function handleClick() {
          console.log("clicked");
        }
      </script>
    </body>
</html>

标签： javascripthtmlcss

解决方案

浏览器会为您剥离事件处理程序以防止 XSS。但是，如果您确定在粘贴的 HTML 中保留潜在危险的内容是可以的，您可以自定义onPaste处理程序：

const editable = document.querySelector('[contenteditable]');
editable.addEventListener('paste', function(event) {
    const dataTransfer = event.clipboardData;
    const html = dataTransfer.getData('text/html');
    document.execCommand('insertHTML', false, html);
    event.preventDefault();
});

这只是一个概念证明，您还需要做很多工作才能使其在不同的浏览器中可靠地工作。

推荐阅读