时间戳

首页 > 解决方案 > 在摩纳哥编辑器中禁用粘贴

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

问题描述

我试图在一个使用 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
});

这就是我在divid中创建编辑器实例的方式code

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

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

标签： javascriptmonaco-editorparcelvisual-studio-monaco

解决方案

找到了解决方法。

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

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

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

推荐阅读