如何修改Monaco编辑器只读状态下的提示框？及domReadOnly与readOnly区别

一、修改readOnly=true时的提示框内容与样式 #

Monaco编辑器在readOnly模式下的默认编辑提示是调用浏览器原生alert，要自定义内容和样式，需通过监听编辑器的onDidAttemptReadOnlyEdit事件拦截默认行为，替换为自定义提示：

1. 自定义提示内容与样式 #

通过监听事件触发自定义弹窗，完全替代默认提示：

const editor = monaco.editor.create(document.getElementById('editor-container'), {
  value: '// 示例只读代码',
  language: 'javascript',
  readOnly: true
});

// 拦截只读编辑尝试事件
editor.onDidAttemptReadOnlyEdit(() => {
  showCustomReadOnlyTip('编辑器已锁定，无法进行编辑操作');
});

// 自定义提示组件
function showCustomReadOnlyTip(text) {
  const tip = document.createElement('div');
  tip.style.cssText = `
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 20px;
    background: #f5222d;
    color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    z-index: 1000;
  `;
  tip.textContent = text;
  document.body.appendChild(tip);
  
  setTimeout(() => document.body.removeChild(tip), 3000);
}

2. 覆盖原生alert（可选） #

若不想重写提示逻辑，可全局替换window.alert来修改样式：

const originalAlert = window.alert;
window.alert = function(message) {
  showCustomReadOnlyTip(message);
};

二、readOnly与domReadOnly的功能差异 #

两个选项实现只读的层级和行为完全不同：

• readOnly: true：编辑器内核层面的只读限制，彻底禁止所有编辑操作（键盘输入、右键菜单编辑等），同时触发Monaco内置的编辑尝试提示。这种限制无法通过修改DOM属性绕过，是最彻底的只读模式。
• domReadOnly: true：仅设置编辑器底层DOM元素的readonly属性，属于DOM层面的只读。仅阻止浏览器默认输入行为，不会触发Monaco内置提示，且可通过控制台修改DOM属性解除限制，安全性和彻底性远低于readOnly。

内容的提问来源于stack exchange，提问作者Filip Rejmus