codeMirror的简单使用,js比较文本差异(标注出增删改)

最近项目需要使用比较文本的差异的功能,在同事的推荐下,使用js脚本来比较,所以codeMirror变成了选择。

当然codeMirror中有其他功能,比较文本差异的只是其中一个功能,本人不在此做介绍,有兴趣的可以登录他的官网

http://codemirror.net/ 进行详细了解。

第一步:下载codeMirror的jar包,下载地址在上面提到的官网,本人使用的是codemirror-4.11这个版本。

第二步:在页面引入它css样式和js文件

其中diff_math_patch.js可能所下载的包里没有,所以要自行下载,

<script src="//cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/diff_match_patch.js"></script>

这是它原来的路径,如果实在找不到,发邮件联系我。

第三步:下面是div和关键性的js脚本。

<div id=view></div>

<script type="text/javascript">
var value, orig1, orig2, dv, panes = 2, highlight = true, connect = null, collapse = false;
function initUI() {
  if (value == null) return;
  var target = document.getElementById("view");
  target.innerHTML = "";
  dv = CodeMirror.MergeView(target, {
    value: value,
    origLeft: panes == 3 && !collapse && !connect ? orig1 : null,
    orig: orig2,
    lineNumbers: true,
    mode: "text/html",
    highlightDifferences: highlight,
    connect: connect,
    collapseIdentical: collapse
  });
}

function toggleDifferences() {
  dv.setShowDifferences(highlight = !highlight);
}

window.onload = function() {
     value=‘Leftssss\nsssdfd\nsdf\nsdf\nsdsdss\naaasdf\nsdfsd\nbbb\nnaaddddddddddddddddddddddddddddddddddddddd\nadssa\nasdas\nasdf\nssss\ndddd\nffff\nccc\naaa\nzzzz\nsss\nbbb\nfff\nvvv\n\ndfddd\nsss\nzzz\noooo\nppp\nyyy\ncccc\nssss\nhhhh\nssss‘;
    orig1 = ‘Leftssss\nsssdfd\nsdf\nsdf\nsdsdss\naaasdf\nsdfsd\nbbb\naaddddddddddddddddddddddddddddddddddddddda\nadssa\nasdas\nasdf\nssss\ndddd\nffff\nccc\naaa\nzzzz\nsss\nbbb\nfff\nvvv\n\ndfddd\nsss\nzzz\noooo\nppp\nyyyncccc\nssss\nhhhh\nsass‘;
    orig2=‘Rightssss\nsssdfd\nsdf\nsdf\nsdsdss\naas\nsdfsd\nbbb\naaa\nadssa\nasdddddddddddddddddddddddddddddddddddddddddddas\nasdf\nsdd\ndffd\nffdg\nccc\naaa\nzzzz\nsss\nbbb\nfff\nvvv\n\ndfddd\nsss\nzs\noodf\nppfdgp\nyyyndfgcc\nssdfgdss\nhhssssh\nsdfgdfg‘;
  initUI();
};

function mergeViewHeight(mergeView) {
  function editorHeight(editor) {
    if (!editor) return 0;
    return editor.getScrollInfo().height;
  }
  return Math.max(editorHeight(mergeView.leftOriginal()),
                  editorHeight(mergeView.editor()),
                  editorHeight(mergeView.rightOriginal()));
}

function resize(mergeView) {
  var height = mergeViewHeight(mergeView);
  for(;;) {
    if (mergeView.leftOriginal())
      mergeView.leftOriginal().setSize(null, height);
    mergeView.editor().setSize(null, height);
    if (mergeView.rightOriginal())
      mergeView.rightOriginal().setSize(null, height);

    var newHeight = mergeViewHeight(mergeView);
    if (newHeight >= height) break;
    else height = newHeight;
  }
  mergeView.wrap.style.height = height + "px";
}
</script>

效果图:

效果图中,左边为原来的文本,右边是比较后的,有差异的脚本会自动标出,两边可以一起上下左右移动。

js中 value 等为本人测试数据随便写的,代码是基本上是demo里的,大家在使用的时候只要注意,window.onload里的value,和 orig1,orig2的赋值就行了,换成你想要比较的的两个文本。

如果有不好的地方,欢迎请大家批评和指正。

 
时间: 2024-10-17 13:34:17

codeMirror的简单使用,js比较文本差异(标注出增删改)的相关文章

JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(二)

前言:上篇 JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(一) 介绍了下knockout.js的一些基础用法,由于篇幅的关系,所以只能分成两篇,望见谅!昨天就觉得应该快点完成下篇,要不然有点标题党的感觉,思及此,博主心有不安,于是加班赶出了下篇.如果你也打算用ko去做项目,且看看吧! 一.效果预览 其实也没啥效果,就是简单的增删改查,重点还是在代码上面,使用ko能够大量节省界面DOM数据绑定的操作.下面是整个整个增删改查逻辑的js代码: 页面效果: 二.

JS中对数组元素进行增删改移

在js中对数组元素进行增删改移,简单总结了一下方法: 方法 说明 实例 push( ); 在原来数组中的元素最后面添加元素 arr.push("再见58"); unshift( ); 在原来数组中的元素最前面添加元素 arr.shift("你好58"): pop(); 移除数组中最后面的一个元素 arr.pop(); shift(); 移除数组中最前面的一个元素 arr.shift(); concat(); 拼接两个数组中的元素 (哪个数组在前面,拼接后它的元素就在

JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(三):两个Viewmodel搞定增删改查

前言:之前博主分享过knockoutJS和BootstrapTable的一些基础用法,都是写基础应用,根本谈不上封装,仅仅是避免了html控件的取值和赋值,远远没有将MVVM的精妙展现出来.最近项目打算正式将ko用起来,于是乎对ko和bootstraptable做了一些封装,在此分享出来供园友们参考.封装思路参考博客园大神萧秦,如果园友们有更好的方法,欢迎讨论. KnockoutJS系列文章: JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(一) JS组件

Oracle网络公开课《蛋炒饭,最简单也最困难——我理解的Oracle增删改查与你不同》

2014年4月18日是<舌尖2>开播的日子(正好是这次网络课的三个月前),吃货们早早准备,连某冰冰也发了这样的微博:"据说今儿晚上不吃饱不能打开电视机,重大杀器<舌尖上的中国>正在出没.嘿嘿,我已经准备好充足的零食,麻溜地坐电视机前了,你呢?" 本节课主要谈和吃有关的话题. 本课主要通过回顾两部电影和纪录片--<食神>和<舌尖上的中国2>,来谈谈如何对百万行以上数据进行增删改查的操作,这些操作和本课的标题一样--蛋炒饭,最简单也最困难,是

ABP教程(四)- 开始一个简单的任务管理系统 - 实现UI端的增删改查

接上一篇:ABP教程(三)- 开始一个简单的任务管理系统 – 后端编码 1.实现UI端的增删改查 1.1添加增删改查代码 打开SimpleTaskSystem.sln解决方案,添加一个“包含视图的MVC 5控制器(使用EntityFramework)”TaskController控制器,添加成功后我们就能得到一个完整增删改查的功能了. 生成的代码是不能用在我们的这个示例里的,还需经过些许调整,经过调整后的代码如下: using System; using System.Net; using Sy

最简单的基于JSP标准标签库的增删改查

创建数据库中的表:CREATE TABLE `websites` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` char(20) NOT NULL DEFAULT '' COMMENT '站点名称', `url` varchar(255) NOT NULL DEFAULT '', `alexa` int(11) NOT NULL DEFAULT '0' COMMENT 'Alexa 排名', `country` char(10) NOT NULL

JS增删改HTML表格

要求如下: 写一个html页面,里面有一个表格,储存用户信息,包括:用户名,密码,姓名,邮箱,电话,qq,身份证号. 现在要通过js对表格进行动态的增删改查(只是内存操作即可): 首先,加载页面时用js加载3条初始化记录: 有一个增加记录的按钮,点击后弹出一个div层提供输入,要求各字段必须符合输入格式且不能为空: 用户名:英文+数字+下划线: 密码:英文+数字+下划线+6位以上: 姓名:中文: 邮箱,电话,qq,身份证号符合格式: 每条记录有修改.删除: 修改类似增加,要把原来值读出来: HT

CodeMirror编辑器文本框Textarea代码高亮插件,CodeMirror的简单实用例子

CodeMirror是一个用于编辑器文本框textarea代码高亮javascript插件,为各种编程语言实现关键字,函数,变量等代码高亮显示,丰富的api和可扩展功能以及多个主题样式,能满足您各种项目的需求. 最近项目中要求把得到的后端json数据如下图展示给客户,还需要可编辑的功能,于是就用到了CodeMirror这款插件,经过初步的探索,发现它主题样式非常靓丽,简单美观,效果图如下: 下面我就一步一步说明我的使用过程. 1.首先需要下载codemirror插件,先创建文件夹,下载插件 np

富文本内容简单的的增删改查

由于html本身的textarea标签的文本编辑功能较为简单,不能设置文字的样式,因此需要富文本控件来增强textarea的功能.       一些常见的富文本控件有:UEditor.kindeditor.simditor.bootstrap-wysiwyg.wangEditor.CKEditor.tinymce,各有优缺点,网上也有对不介绍,不再赘述. 此处选用tinymce,因其兼容性较好,插入页面也较为简单,此外还有丰富的插件可以扩展功能. 首先,在页面上使用tinymce:1.引入js文