首页 > 编程学习 > Monaco Editor教程(七): 实现版本对比功能

背景

在具有版本控制功能的WEB IDE 中,提交代码时,会有一个版本对比的功能,你可以点击每一个修改的文件,然后对比基础版本与当前修改的版本,被修改的地方会有颜色区分。这对于一个修改大文件,修改内容比较多时非常的实用。下面我们就使用monaco editor来实现这样的一个功能。

先看一下效果图:
在这里插入图片描述

对比功能实现

实现对比功能也是比较简单的,在创建 editor时需要使用createDiffEditor()方法,

diffEditor = monaco.editor.createDiffEditor(document.getElementById('container'), {
  enableSplitViewResizing: false
});

方法monaco.editor.createDiffEditor 与之前的 monaco.editor.create() 很类似,第一个参数是编辑器容器,第二个参数是编辑器配置参数。
不同的是createDiffEditor 的配置参数是该IStandaloneDiffEditorConstructionOptions数据类型。

其中的参数 enableSplitViewResizing 表示 是否允许用户改变对比编辑器的分割视图。默认为true,
当值是false时,这里无法拖动。
在这里插入图片描述

创建完对比编辑器后,需要设置对比编辑器的基础版本,和修改版本 如下

var oldVersionModel = monaco.editor.createModel(oldVersion, 'text/javascript');
var newVersionModel = monaco.editor.createModel(newVersion, 'text/javascript');

diffEditor.setModel({
  original: oldVersionModel,
  modified: newVersionModel
});

oldVersion是基础版本的文本内容。
newVersion是当前正在修改的文本内容。

创建二个model,然后使用diffEditor.setModel 设置original与modified。
original表示原始版本。
modified表示本次正在修改的版本。

设置后,就能看到页面
在这里插入图片描述
点击切换显示方式,显示为行内对比

diffEditor.updateOptions({
 renderSideBySide: !renderSideBySide
});

在这里插入图片描述

就是如此的简单,优雅。

编辑器适应容器的大小

如果编辑器的容器不是一个固定大小的容器,那么要想编辑器跟随容器改变大小,就需要在window.onresize函数下,调用diffEditor.layout() 函数

window.onresize = function () {
  if (diffEditor) {
    diffEditor.layout();
  }
};

完整代码

<!DOCTYPE html>
<html>

<head>
  <title>版本对比功能 Monaco Editor</title>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>

<body>
  <h2>Monaco Editor 版本对比功能</h2>
  <button onclick="changeShowWay()">切换对比方式</button>

  <div id="container" style="width: 100%; height:800px; border: 1px solid grey"></div>

  <script src="./monaco-editor/package/min/vs/loader.js"></script>
  <script src="./const.js"></script>
  <script>
    require.config({ paths: { vs: './monaco-editor/package/min/vs' } });
    let diffEditor
    let renderSideBySide = true

    require(['vs/editor/editor.main'], function () {

      diffEditor = monaco.editor.createDiffEditor(document.getElementById('container'), {
        enableSplitViewResizing: false
      });

      var oldVersionModel = monaco.editor.createModel(oldVersion, 'text/javascript');
      var newVersionModel = monaco.editor.createModel(newVersion, 'text/javascript');

      diffEditor.setModel({
        original: oldVersionModel,
        modified: newVersionModel
      });

    });

    function changeShowWay() {
      diffEditor.updateOptions({
        renderSideBySide: !renderSideBySide
      });
      renderSideBySide = !renderSideBySide
    }

    window.onresize = function () {
      if (diffEditor) {
        diffEditor.layout();
      }
    };


  </script>
</body>

</html>
Copyright © 2010-2022 mfbz.cn 版权所有 |关于我们| 联系方式|豫ICP备15888888号