Mergely对比工具使用方法-CSDN博客

文章介绍了如何在Web页面上利用Mergely插件进行代码比对和合并差异的操作。通过引入jQuery,CodeMirror和Mergely的相关库文件，结合JavaScript编写示例代码，展示了如何设置和控制比对功能，包括滚动到差异、清除和合并代码等操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近需要在web页面上实现代码比对并且能合并差异代码的功能，就用到了Mergely插件，记录一下供各位参考。（底部链接可下载示例代码）

效果图：

demo代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" /><title>Mergely - Example</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<meta name="author" content="ZSH" />

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

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

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

	<script type="text/javascript">
	var left =`相信未来
【作者】食指

当蜘蛛网无情地查封了我的炉台
当灰烬的余烟叹息着贫困的悲哀
我依然固执地铺平失望的灰烬
用美丽的雪花写下：相信未来

当我的紫葡萄化为深秋的露水
当我的鲜花依偎在别人的情怀
我依然固执地用凝霜的枯藤
在凄凉的大地上写下：相信未来

我要用手指那涌向天边的排浪
我要用手掌那托住太阳的大海
摇曳着曙光那枝温暖漂亮的笔杆
用孩子的笔体写下：相信未来

我之所以坚定地相信未来
是我相信未来人们的眼睛
她有拨开历史风尘的睫毛
她有看透岁月篇章的瞳孔

不管人们对于我们腐烂的皮肉
那些迷途的惆怅、失败的苦痛
是寄予感动的热泪、深切的同情
还是给以轻蔑的微笑、辛辣的嘲讽

我坚信人们对于我们的脊骨
那无数次的探索、迷途、失败和成功
一定会给予热情、客观、公正的评定
是的，我焦急地等待着他们的评定

朋友，坚定地相信未来吧
相信不屈不挠的努力
相信战胜死亡的年轻
相信未来、热爱生命`;

var right =`当蜘蛛网无情地查封了我的台炉
当灰烬的余烟叹息着贫困的悲哀
我依然固执地铺平失望的灰烬
用美丽的雪花写下：相信未来

当我的紫葡萄化为深秋的露水
当我的鲜花依偎在别人的情怀
我依然固执地用凝霜的枯藤
在凄凉的大地上写下：相信

我要用手指那涌向天边的排浪花
我要用手掌那托住太阳的大大大海
摇曳着曙光那枝温暖漂亮的笔杆
用孩子的笔体写下：相信未来

我之所以坚定地相信未来
是我相信未来人们的眼睛
她有拨开历史风尘的睫毛
她有看透岁月篇章的瞳孔

我之所以坚定地相信未来
是我相信未来人们的眼睛
她有拨开历史风尘的睫毛
她有看透岁月篇章的瞳孔

不管人们对于我们腐烂的皮肉
那些迷途的惆怅、失败苦痛
是寄予感动的热泪、深切的同情
还是给以轻蔑的微笑、辛辣的嘲讽

我坚信人们对于我们的脊骨
那无数次的探索、迷途、失败和成功

朋友，坚定地相信未来吧
相信不屈不挠的努力
相信战胜死亡的年轻
相信未来、热爱生命`;


		$(document).ready(function () {
			var mergely = $('#mergely');

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

			//赋值
			// mergely.mergely('lhs', 'value');

			//获取左边内容
			var leftValue = mergely.mergely('get', 'lhs');
			// alert(leftValue);

			//获取右边内容
			// var rightValue = $("#mergely").mergely('get', 'rhs');

			$('#next').bind('click',function () {
				mergely.mergely('scrollToDiff', 'next');
			});

			$('#prev').bind('click',function () {
				mergely.mergely('scrollToDiff', 'prev');
			});

			$('#clearL').bind('click',function () {
				mergely.mergely('clear', 'lhs');
			});

			$('#clearR').bind('click',function () {
				mergely.mergely('clear', 'rhs');
			});

			$('#mergeL').bind('click',function () {
				mergely.mergely('merge', 'lhs');
			});

			$('#mergeR').bind('click',function () {
				mergely.mergely('merge', 'rhs');
			});

			$('#mergeCurrentL').bind('click',function () {
				mergely.mergely('mergeCurrentChange', 'lhs');
			});

			$('#mergeCurrentR').bind('click',function () {
				mergely.mergely('mergeCurrentChange', 'rhs');
			});

		});

	</script>
	<style>
		button {
			margin-bottom: 10px;
			display: inline;
		}
	</style>
</head>

<body>
	<div>
		<h2>Diff Demo</h2>
		<div style="">
			<button id ="next">下一处</button>
			<button id ="prev">上一处</button>
			<button id ="clearL">清空左侧</button>
			<button id ="clearR">清空右侧</button>
			<button id ="mergeL">合并到左侧</button>
			<button id ="mergeR">合并到右侧</button>
			<button id ="mergeCurrentL">合并此处到左侧</button>
			<button id ="mergeCurrentR">合并此处到右侧</button>
		</div>

		<div class="mergely-full-screen-8" style="position: unset">
			<div class="mergely-resizer">
				<div id="mergely"></div>
			</div>
		</div>
	</div>

</body>

</html>

代码下载：

链接: https://pan.baidu.com/s/1VkbPY5mQa78IrpmZx_975g 提取码: uw7m