如何取消Grav内置CodeMirror编辑器的focus()聚焦

方案1：阻止点击事件冒泡，主动聚焦自定义编辑器 #

CodeMirror内部会监听容器的点击事件来自动聚焦，你可以给自定义编辑器添加点击事件，阻止事件冒泡到CodeMirror的父元素，同时主动让自定义编辑器获取焦点：

const customEditor = document.querySelector('.custom-wysiwyg');
customEditor.addEventListener('click', function(e) {
  // 阻止事件向上冒泡，避免CodeMirror捕获到点击事件
  e.stopPropagation();
  // 强制让自定义编辑器获得焦点
  this.focus();
});

方案2：临时禁用CodeMirror的输入能力 #

如果方案1无效，你可以直接操控CodeMirror实例，在点击自定义编辑器时让CodeMirror失去焦点并临时设为只读，离开时恢复：

// 获取Grav中CodeMirror的实例
const codeMirrorEl = document.querySelector('.CodeMirror');
const cmInstance = codeMirrorEl.CodeMirror;

const customEditor = document.querySelector('.custom-wysiwyg');

// 鼠标按下时就阻止CodeMirror抢焦点
customEditor.addEventListener('mousedown', function(e) {
  e.stopPropagation();
  // 让CodeMirror失去焦点
  cmInstance.blur();
  // 临时设置为只读，禁止CodeMirror获取焦点
  cmInstance.setOption('readOnly', 'nocursor');
  // 聚焦自定义编辑器
  this.focus();
});

// 自定义编辑器失去焦点后，恢复CodeMirror的可编辑状态
customEditor.addEventListener('blur', function() {
  cmInstance.setOption('readOnly', false);
});

方案3：调整DOM结构，隔离两个编辑器 #

如果前两个方案都没效果，可能是因为你把自定义编辑器放在了CodeMirror的内部容器里，CodeMirror的事件捕获机制会优先处理。可以把自定义编辑器移到CodeMirror容器外面，通过CSS定位覆盖在上方：

<!-- 调整后的DOM结构 -->
<div class="editor-wrapper">
  <!-- 原有的CodeMirror容器 -->
  <div class="CodeMirror">...</div>
  <!-- 自定义WYSIWYG编辑器 -->
  <div class="custom-wysiwyg" contenteditable="true"></div>
</div>

对应的CSS：

.editor-wrapper {
  position: relative;
}
.custom-wysiwyg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  /* 保留你原来的其他样式 */
}

建议先尝试方案1，它是最轻量化的解决方式；如果CodeMirror的事件监听优先级太高，再用方案2；如果DOM结构导致的问题无法通过事件阻止解决，最后用方案3重构布局。

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