Mergely--JavaScript 组件的学习和引用（文本对比合并工具）

最新推荐文章于 2024-05-09 09:46:21 发布

无风也等你

最新推荐文章于 2024-05-09 09:46:21 发布

阅读量866

点赞数 1

文章标签： javascript 学习开发语言前端

本文链接：https://blog.csdn.net/qq_43593756/article/details/132995841

版权

介绍

Mergely是一个JavaScript组件，用于在浏览器中以交互方式对文件进行区分和合并（diff/mmerge），提供丰富的API，使您能够轻松地将Mergely集成到现有的web应用程序中。它适用于在线比较文本文件，例如.txt、.html、.xml、.c、.cpp、.java等。
Mergely具有Longest Common Subsequence（LCS）diff算法的JavaScript实现和可定制的标记引擎。

官网

Mergely官网
 Meeergely的GitHub地址

效果图

文件对比

代码示例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>版本对比</title>

  <!-- Requires jQuery -->
  <script type="text/javascript" src="../static/utils/js/mergely/jquery.min.js"></script>

  <!-- Requires CodeMirror -->
  <script type="text/javascript" src="../static/utils/js/mergely/codemirror.min.js"></script>
  <script type="text/javascript" src="../static/utils/js/mergely/searchcursor.min.js"></script>
  <link type="text/css" rel="stylesheet" href="../static/utils/js/mergely/codemirror.min.css" />

  <!-- Requires Mergely -->
  <script type="text/javascript" src="../static/utils/js/mergely/mergely.js"></script>
  <link type="text/css" rel="stylesheet" href="../static/utils/js/mergely/mergely.css" />



</head>

<body>
  <div id="diffNCFiles" style="font-size: 20px;">
    <div class="mergely-full-screen-8">
      <div class="mergely-resizer">
        <div id="mergely"></div>
      </div>
    </div>
  </div>
</body>

<script type="text/javascript" src="../static/utils/require.js"></script>
<script type="text/javascript">
  //将地址参数转化为对象
  function getQueryStringArgs (url) {
    var qs = url.split('?')[1], //取得查询字符串并去掉开头的问号
      //保存数据的对象
      args = {},
      //取得每一项
      items = qs.length ? qs.split("&") : [],
      item = null,
      key = null,
      value = null,
      //在 for 循环中使用
      i = 0,
      len = items.length;
    //逐个将每一项添加到 args 对象中
    for (i = 0; i < len; i++) {
      item = items[i].split("=");
      key = decodeURIComponent(item[0]); //把已编码的url转换成原字符
      value = decodeURIComponent(item[1]);
      if (key.length) {
        args[key] = value;
      }
    }
    return args;
  }
  //从其他页面获取文件地址，
  let filePaths = getQueryStringArgs(window.location.href)


  $(document).ready(function () {
    $('#mergely').mergely({
      sidebar: true,   //是否显示侧边栏，设置成false可以提高大型文档的性能
      ignorews: false,  //是否忽略空格对比
      license: 'lgpl',
      cmsettings: {
        readOnly: true //false则展示合并箭头，运行两边能够合并
      },
      // lhs: function (setValue) {
      //   setValue(left);
      // },
      // rhs: function (setValue) {
      //   setValue(right);
      // },

    });

    //获取文件内容
    $.ajax({
      type: 'GET',
      url: url,
      data: { path: filePaths.leftPath },
      success: function (response) {

        data = JSON.parse(response);
        if (data.resultCode == 1000) {
          let str = data.returnObject.list.join("\n")
          $('#mergely').mergely('lhs', str);
        }


      }
    })
    $.ajax({
      type: 'GET',
      url: url,
      data: { path: filePaths.rightPath },
      success: function (response) {
        data = JSON.parse(response);
        if (data.resultCode == 1000) {
          let str = data.returnObject.list.join("\n")
          $('#mergely').mergely('rhs', str);
        }

      }
    })
  });
</script>
</html>