【实例简介】基于mergely制作的在线文本对比工具 (Html js) 基于mergely制作的在线文本对比工具 (Html js)

【实例截图】

【核心代码】

在线文本差异对比

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}

$(document).ready(function () {

$('#compare').mergely({

width: 'auto',

height: 'auto', // containing div must be given a height

cmsettings: { 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

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");

});

});

.CodeMirror { line-height: 18px; }