在摩纳哥编辑器中禁用粘贴

Question

我试图在使用 parcel 作为打包器的 Web 项目上实现 Monaco 编辑器，但发现很难防止粘贴操作（我不希望用户在编辑器中粘贴代码）。

这就是我初始化编辑器的方式

import * as monaco from 'monaco-editor/esm/vs/editor/editor.main.js';

// set monaco web workers url
window.MonacoEnvironment = {
  getWorkerUrl: (moduleId, label)=> {
        if (label === 'json') {
            return '../language/json/json.worker.js';
        }
        if (label === 'css') {
            return '../language/css/css.worker.js';
        }
        if (label === 'html') {
            return '../language/html/html.worker.js';
        }
        if (label === 'typescript' || label === 'javascript') {
            return '../language/typescript/ts.worker.js';
        }
        return '../editor/editor.worker.js';
  }
};


export const monacoCreate = (MonacoConfig = {}, doc) => monaco.editor.create(doc, {
  value: [
    'function x() {',
    '\tconsole.log("Hello world!");',
    '}'
  ].join('\n'),
  language: "javascript",
  theme: "white",
  mouseWheelZoom: true,
  readOnly: false,
  showUnused: true,
  wordWrap: "on",
  selectionClipboard: false,
  ...MonacoConfig
});

这就是我在 div 中创建编辑器实例的方式，id 为 code

const select = document.querySelector.bind(document);
const editor = monacoCreate({ language: language.html }, select('#code'));

现在的挑战是阅读 Monaco docs，我找不到内置的方法来防止编辑器中的粘贴事件，我也没有找到绕过它的方法。请帮忙。

Answer 1

找到解决方法。

Monaco 有一个内置的 onKeyDown() 方法，该方法 returns 一个事件（有关按下的键和未按下的键的详细信息）。我所做的只是按下按键的 keyCode 并检查是否按下了 CTRL 或 CMD 键因此，在将项目粘贴到 Monaco 编辑器时，我阻止了按下 CtrlOrCmd+v 和 CtrlOrCmd+c 键时的默认操作。

下面显示了我是如何实施修复的

 editor.onKeyDown((event)=>{
    const {keyCode, ctrlKey, metaKey} = event;
    if((keyCode === 33 || keyCode ===52) && (metaKey || ctrlKey)){
      event.preventDefault();
    }
  });

在摩纳哥编辑器中禁用粘贴

Disable Paste in Monaco Editor

javascript

monaco-editor

parcel

visual-studio-monaco