基于mergely制作的在线文本对比工具 (Html js) 基于mergely制作的在线文本对比工具 (Html js)
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>在线文本差异对比</title> <meta name="description" content="本工具可以方便大家快速对比两个文本文件中的不同之处。结果清晰明了，可快带替换差异内容并将结果直接下载。"> <meta name="keywords" content="在线文本差异对比,文本对比,文本比较,文本比较工具,代码差异对比,内容差异对比"><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="renderer" content="webkit"><!-- Bootstrap --><link href="./resources/bootstrap.min.css" rel="stylesheet" media="screen"><link href="./resources/font-awesome.min.css" rel="stylesheet" media="screen"><link href="./resources/my.css" rel="stylesheet" media="screen"><link href="./resources/dl.css" rel="stylesheet" media="screen"><script>var n = 1;</script><script type="text/javascript" src="./resources/jquery.min.js"></script><script type="text/javascript" src="./resources/c.min.js"></script><link type="text/css" rel="stylesheet" href="./resources/c.css"><script type="text/javascript" src="./resources/m.js"></script> <link type="text/css" rel="stylesheet" href="./resources/m.css"><style type="text/css"> body{ background-color: #1A1A1A; color: #fff }.drop_zone {border: 2px dashed #BBBBBB;border-radius: 5px 5px 5px 5px;color: #BBBBBB;padding: 10px 25px;text-align: center;align: center;width: 80%;}#path-lhs,#path-rhs{ font-size: 30px; font-family: Arial; color:#C9C9C9}#path-rhs{ }#compare-editor-lhs{ background-color: #212121; }#compare-editor-rhs{ background-color: #002035 }#compare-lhs-margin,#compare-rhs-margin{ display:none}.CodeMirror - scroll {background - color: #1d1f20;}#merge-lhs-4{ font-family: "宋体"; }.save-link { color: #F8F8F8; }.dmsm{ font-family: "微软雅黑"; font-size: 12px; padding-left: 20px; }#compare .CodeMirror-lines pre{transition: all 1s ease 0s;}#compare .CodeMirror-lines pre:hover{ background-color:#FDFFC6; color:#000000} td, th { border: 0px ; } .wbbt { text-align:center; border-bottom: 1px solid #333333; line-height:40px}</style><script type="text/javascript">$(document).ready(function () {$('#compare').mergely({width: 'auto',height: 'auto', // containing div must be given a heightcmsettings: { readOnly: false },});// var lhs_url = 'js/dm/a.txt';// var rhs_url = 'js/dm/b.txt'// $.ajax({// type: 'GET', async: true, dataType: 'text',// url: lhs_url,// success: function (response) {// $('#path-lhs').text("A");// $('#compare').mergely('lhs', response);// }// });// $.ajax({// type: 'GET', async: true, dataType: 'text',// url: rhs_url,// success: function (response) {// $('#path-rhs').text("B");// $('#compare').mergely('rhs', response);// }// });var sidefileName = {"lhs":"A.txt","rhs":"B.txt",}window.filesInfo = function(files,target){let node = target;while(true){var nodeId = node.getAttribute("id");if (nodeId){if (nodeId.indexOf("compare-editor-")>-1){break;}}node = node.parentNode;}let fileName = files[0].name;for(let i=1;i<files.length;i ){fileName ="_" files[i].name;}side = node.getAttribute("id").split("compare-editor-")[1];//清除$('#compare').mergely('clear', side);//文件名$("#path-" side).html(fileName);sidefileName[side] = fileName;}function saveAs(a, side){name = sidefileName[side];var filename = prompt("請輸入文件名",name);if (!filename){filename = name;}var txt = $('#compare').mergely('get', side);var datauri = "data:plain/text;charset=UTF-8," encodeURIComponent(txt);a.setAttribute('download', filename);a.setAttribute('href', datauri);}$('#save-lhs').click(function(){saveAs(this, "lhs");});$('#save-rhs').click(function(){saveAs(this, "rhs");});});</script><style type="text/css">#compare .CodeMirror-gutter-text { padding: 5px 0 0 0; }#compare .CodeMirror-lines pre, #compare .CodeMirror-gutter-text pre { line-height: 18px; }.CodeMirror-linewidget { overflow: hidden; };compare .CodeMirror-scroll { height: 100%; overflow: auto; }.CodeMirror { line-height: 18px; }</style></head><body data-spy="scroll" data-target=".navbar-example" style="overflow-x: hidden;"><div class="container-fluid m0 bod top10" id="zt"><h3 class="wbbt">在线文本比较工具</h3><table align="center" style="width: 100%;"><tbody><tr style="border-left: 1px solid #1D1D1D; border-top:1px solid #1D1D1D;"><td style="width: 50%;background-color: #1a1a1a;color: #bd6969;"><tt id="path-lhs">A.txt</tt></br><a id="save-lhs" class="save-link" href="" download="lhs.txt">保存</a><span class="dmsm">(在下面输入您的代码或文本，或直接把文件拖入到框中)</span></td><td style="width: 50%;background-color: #1a1a1a;color: #8bcaf3"><tt id="path-rhs">B.txt</tt></br><a id="save-rhs" class="save-link" href="" download="rhs.txt">保存</a><span class="dmsm">(在下面输入您的代码或文本，或直接把文件拖入到框中)</span></td></tr></tbody></table><div id="mergely-resizer" style="height:800px;"><div id="compare" style="display: block; width: 1365px; height: 800px; clear: both;"></div></div></div></body><audio controls="controls" style="display: none;"></audio><div style="position: static; display: none; width: 0px; height: 0px; border: none; padding: 0px; margin: 0px;"><div id="trans-tooltip"><div id="tip-left-top" style="background: url("chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-left-top.png");"></div><div id="tip-top" style="background: url("chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-top.png") repeat-x;"></div><div id="tip-right-top" style="background: url("chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-right-top.png");"></div><div id="tip-right" style="background: url("chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-right.png") repeat-y;"></div><div id="tip-right-bottom" style="background: url("chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-right-bottom.png");"></div><div id="tip-bottom" style="background: url("chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-bottom.png") repeat-x;"></div><div id="tip-left-bottom" style="background: url("chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-left-bottom.png");"></div><div id="tip-left" style="background: url("chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-left.png");"></div><div id="trans-content"></div></div><div id="tip-arrow-bottom" style="background: url("chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-arrow-bottom.png");"></div><div id="tip-arrow-top" style="background: url("chrome-extension://ikkbfngojljohpekonpldkamedehakni/imgs/map/tip-arrow-top.png");"></div></div><script type="text/javascript" src="chrome-extension://emikbbbebcdfohonlaifafnoanocnebl/js/minerkill.js"></script></body><style type="text/css">#yddContainer{display:block;font-family:Microsoft YaHei;position:relative;width:100%;height:100%;top:-4px;left:-4px;font-size:12px;border:1px solid}#yddTop{display:block;height:22px}#yddTopBorderlr{display:block;position:static;height:17px;padding:2px 28px;line-height:17px;font-size:12px;color:#5079bb;font-weight:bold;border-style:none solid;border-width:1px}#yddTopBorderlr .ydd-sp{position:absolute;top:2px;height:0;overflow:hidden}.ydd-icon{left:5px;width:17px;padding:0px 0px 0px 0px;padding-top:17px;background-position:-16px -44px}.ydd-close{right:5px;width:16px;padding-top:16px;background-position:left -44px}#yddKeyTitle{float:left;text-decoration:none}#yddMiddle{display:block;margin-bottom:10px}.ydd-tabs{display:block;margin:5px 0;padding:0 5px;height:18px;border-bottom:1px solid}.ydd-tab{display:block;float:left;height:18px;margin:0 5px -1px 0;padding:0 4px;line-height:18px;border:1px solid;border-bottom:none}.ydd-trans-container{display:block;line-height:160%}.ydd-trans-container a{text-decoration:none;}#yddBottom{position:absolute;bottom:0;left:0;width:100%;height:22px;line-height:22px;overflow:hidden;background-position:left -22px}.ydd-padding010{padding:0 10px}#yddWrapper{color:#252525;z-index:10001;background:url(chrome-extension://eopjamdnofihpioajgfdikhhbobonhbb/ab20.png);}#yddContainer{background:#fff;border-color:#4b7598}#yddTopBorderlr{border-color:#f0f8fc}#yddWrapper .ydd-sp{background-image:url(chrome-extension://eopjamdnofihpioajgfdikhhbobonhbb/ydd-sprite.png)}#yddWrapper a,#yddWrapper a:hover,#yddWrapper a:visited{color:#50799b}#yddWrapper .ydd-tabs{color:#959595}.ydd-tabs,.ydd-tab{background:#fff;border-color:#d5e7f3}#yddBottom{color:#363636}#yddWrapper{min-width:250px;max-width:400px;}</style></html>
评论