如何只实现Contenteditable属性的Ctrl+A功能？

Question

我正在尝试为用户显示带有一些示例代码的 div。我希望他们能够在 div 内进行选择并使用 Ctrl + A 选择所有示例代码，但我不希望他们能够编辑实际文本（以免意外删除一点然后它不会工作）。

我现在通过在 div 上设置 contenteditable 来实现这一点，但是如何在没有实际文本编辑的情况下获得此属性的相同功能？

编辑：查看@Mr. Llama 的comment 中链接的解决方案，我可以使用此方法来实现我正在寻找的主要功能。但是，如果可能的话，我想简单地允许我的用户熟悉的 Ctrl + A 命令，并且仍然允许手动突出显示 div 文本的 sn-ps。同样，同时禁止添加或删除任何文本。

Answer 1

当我阻止 onkeydown、oncut 和 onpaste 事件时，似乎对我有用。

for (const elm of document.getElementsByClassName('editable-not-editable')) {
  elm.setAttribute('contenteditable', true);
  elm.spellcheck = false;
  elm.oncut = () => false;
  elm.onpaste = () => false;
  elm.onkeydown = (event) => {
    if (event.metaKey || event.ctrlKey) {
      return;
    }
    event.preventDefault();
  }
}

<div class="editable-not-editable">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
  irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
  pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
  deserunt mollit anim id est laborum.
</div>