查看: 2410|回复: 0

[HTML代码] 自己写代码对比工具 嗯嗯

发表于 2018-2-12 08:00:01

作者:娇娇jojo

时间:2018年1月22日

上一篇:自己写JSON编辑器 JSON校验工具

先说一句题外话:其实标题不是那样的,但要求不低于10个字,所以,嗯嗯。。。

基于上一次做的JSON编辑器,继而衍生出这一次的代码对比工具,本来打算写在一块的,想想懒得在写好的一堆东西里倒持,就单独起一个博客吧,也无所谓。

今天要说的主角就是mergely。样式也很简单,但用起来真的很方便。如果不引入自己的项目的话,直接打开mergely的官网首页,直接用就OK。如果要引入自己的项目,比如说我上一篇写的JSON编辑器,编辑完JSON后,人工校验和原有数据的差别,仅凭肉眼看肯定活活累死,而且还不保证准确性。在自动化这么发达的时代,也不允许人工来操作吧,哈哈哈。mergely有文档,照着文档接入也很方便,提供的API也比较全,完全能hold得住平时的工作。

好了,话不多说,下面就是mergely 代码对比的一张截图。
图片描述

接着,就来说怎么接入。

一、安装 1、用npm和webpack来安装依赖

这种方法就不细说了,对于用惯了webpack的盆友来说,应该很简单。

2、直接引入cdn
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  2. <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.js"></script>
  3. <link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.css">
  4. <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/addon/search/searchcursor.min.js"></script>
  5. //mergely.js和mergely.css官网是没有直接提供的,我也是直接扒官网首页的代码的,哈哈哈。下面的jojojojo是我自己买的服务器域名,mergely.js和mergely.css也放在上面,大家要使用的话可以打开网址下载到自己的项目中使用
  6. <script src="lib/mergely/lib/mergely.js" type="text/javascript"></script>
  7. <link rel="stylesheet" media="all" href="lib/mergely/lib/mergely.css">
复制代码
二、使用
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>代码对比工具</title>
  6. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.css">
  7. <link rel="stylesheet" href="https://jojojojo.duapp.com/jsonEitorTest/css/mergely.css">
  8. </head>
  9. <body>
  10. <div class="mergely-full-screen-8">
  11. <div class="mergely-resizer">
  12. <div id="mergely"></div>
  13. </div>
  14. </div>
  15. </body>
  16. <script src="https://jojojojo.duapp.com/jsonEitorTest/js/jquery.min.js"></script>
  17. <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.js"></script>
  18. <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/addon/search/searchcursor.min.js"></script>
  19. <script src="https://jojojojo.duapp.com/jsonEitorTest/js/mergely.js"></script>
  20. <script>
  21. //初始化代码对比区域
  22. $('#mergely').mergely({
  23. license: 'lgpl-separate-notice',
  24. width: 1200,
  25. height: 350,
  26. wrap_lines: true,
  27. line_numbers: false,
  28. lhs: function(setValue) {
  29. setValue("the quick red fox\njumped over the hairy dog"); //初始化左边区域
  30. },
  31. rhs: function(setValue) {
  32. setValue("the quick brown fox\njumped over the lazy dog"); //初始化右边区域
  33. }
  34. });
  35. // 只读,不可编辑,根据个人需要,要或不要
  36. // $('#mergely').mergely('cm', 'lhs').options.readOnly = true;
  37. // $('#mergely').mergely('cm', 'rhs').options.readOnly = true;
  38. </script>
  39. </html>
复制代码

结果:
图片描述

一边编辑,就会一边对比,方便得很nei~

上面写的js就能完成很基础的功能,一般也都可用了,至于其他的功能,可详见mergely官网 http://www.mergely.com/doc。
图片描述



回复

使用道具 举报