使用 Ace Editor 进行镜像。如何删除镜像编辑器的文本答案

【问题标题】：Mirroring with Ace Editor. How to Remove Text of Mirrored Editor使用 Ace Editor 进行镜像。如何删除镜像编辑器的文本
【发布时间】：2025-12-12 22:30:01
【问题描述】：

我整天都被这个问题困扰。我在浏览器中并排创建了两个 Ace Editors。右边的编辑器是只读的，用来镜像左边的编辑器。然后我设置了一些 Socket.IO 事件，基本上将更改从左侧的编辑器发送到右侧的编辑器。更新正确编辑器的所有功能都运行良好，除非我删除某些内容。我觉得我已经尝试了所有方法，但最接近的是当我删除左侧的某些内容时，它会删除右侧左上角的字符。

这是我到目前为止的代码。

      var oEditor = ace.edit("rightEditor");
      oEditor.setTheme("ace/theme/eclipse");
      oEditor.getSession().setUseWrapMode(true);
      oEditor.getSession().setMode("ace/mode/javascript");
      oEditor.setReadOnly(true);
      var socket = io.connect('http://localhost');
        socket.on('sendFirstChange', function(text){
          oEditor.getSession().setValue(text.val);
        })
        socket.on('sendChange', function (data) {
          if(data.data.action === 'insertText'){
            var start = data.data.range.start.column;
            var end = data.data.range.start.row;
            oEditor.getSession().insert({row: end, column: start},data.data.text);
          } else if(data.data.action === 'removeText'){
            oEditor.remove(); //this is where it's not working
          }
        });

有什么想法吗？

非常感谢！

【问题讨论】：

标签： javascript ace-editor

【解决方案1】：

你可以使用https://github.com/ajaxorg/ace/blob/master/lib/ace/worker/mirror.js的镜像类

【讨论】：

【解决方案2】：

*用户，感谢镜像类。我昨晚想通了，但直到今天我才能将其发布为答案。

嗯，我想我终于想通了。这是给档案的。我不确定这是否是最有效的方法，但我没有尝试巧妙地替换右侧编辑器中的代码，而是发送左侧编辑器中的所有文本并完全替换右侧编辑器中的所有代码。似乎工作得很好。

function(scope, ele, attrs) {   
      var oEditor = ace.edit("rightEditor");
      oEditor.setTheme("ace/theme/eclipse");
      oEditor.getSession().setUseWrapMode(true);
      oEditor.getSession().setMode("ace/mode/javascript");
      oEditor.setReadOnly(true);
      var socket = io.connect('http://localhost');
        socket.on('sendChange', function (data, text) {
          oEditor.getSession().setValue(text);
        });
      scope.oEditor = oEditor;
  }

【讨论】：