最近需要在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
文章评论