Question

我试图使用包裹作为捆绑器在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

找到了解决方法。

摩纳哥有一个内置的onPaste()方法，该方法返回一个事件（粘贴项目在编辑器中的位置）。我所做的就是在getModel方法中利用摩纳哥的onPaste()方法。因此，在将项目粘贴到Monaco编辑器时，我使用editor.getModel().undo()方法撤消了粘贴操作。

这就是我通过在onPaste事件中触发撤消来实现此修复程序的方式

 editor.onDidPaste(()=> {
    editor.getModel().undo();
  });

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

1 个答案: