You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Ace Editor嵌入对话框后光标位置偏移问题求助

Fix Ace Editor Cursor Offset Issue in jQuery Dialog

我之前处理过类似的问题,这种光标位置偏移的情况几乎都是因为Ace Editor在隐藏容器中初始化导致的——当你的#editor一开始是display:none时,Ace无法正确获取容器的实际尺寸和布局信息,渲染光标就会出现偏移。下面是具体的修复方案:

1. 把Ace初始化移到对话框打开后执行

原来的代码在页面加载时就初始化了Ace,但此时#editor是隐藏的,Ace没法计算正确的布局。你需要把初始化逻辑移到对话框的open回调里,确保编辑器容器已经显示后再初始化:

$("#dialog-message").dialog({
  width: 800,
  height: 600,
  buttons: {
    // 按钮逻辑保持不变
  },
  open: function(){
    $('#editor').show();
    // 用全局变量保存编辑器实例,避免重复初始化
    if (!window.aceEditor) {
      window.aceEditor = ace.edit("editor");
      window.aceEditor.setTheme("ace/theme/monokai");
      window.aceEditor.getSession().setMode("ace/mode/javascript");
    }
    // 强制Ace重新计算布局,修正光标位置
    window.aceEditor.resize();
    window.aceEditor.focus();
  },
  close: function() {
    $('#editor').hide();
    cell.set('wi_script_editor', false);
  }
});

记得删掉页面加载时的Ace初始化代码,避免重复创建实例。

2. 调整编辑器容器的CSS适配对话框

原来的绝对定位可能和jQuery Dialog的内部布局冲突,给对话框容器加上相对定位,让编辑器的绝对定位基于对话框:

#dialog-message {
  position: relative; /* 让编辑器的绝对定位以对话框为基准 */
}
#editor {
  position: absolute;
  top: 15px; /* 避开对话框标题栏 */
  right: 15px;
  bottom: 70px; /* 避开底部按钮栏 */
  left: 15px;
}

这样编辑器会在对话框内部留出合适的边距,也能让Ace更准确地计算容器尺寸。

3. 确保对话框尺寸稳定后再触发resize

如果对话框有动画效果,可能需要延迟一点再调用resize(),确保布局完全稳定:

open: function(){
  $('#editor').show();
  setTimeout(() => {
    if (!window.aceEditor) {
      window.aceEditor = ace.edit("editor");
      window.aceEditor.setTheme("ace/theme/monokai");
      window.aceEditor.getSession().setMode("ace/mode/javascript");
    }
    window.aceEditor.resize();
    window.aceEditor.focus();
  }, 100); // 延迟100ms,等待对话框动画完成
}

这些方法应该能解决光标偏移的问题,核心就是让Ace在容器可见且布局稳定的情况下初始化或重新计算布局。

内容的提问来源于stack exchange,提问作者user8598044

火山引擎 最新活动