• codemirror插件-文件比较组件merge


    目的: 为了实现文件比较功能

    引用文件

    从github下载项目后,从以下路径引用文件,其中部分github分支中codemirror.js 需要运行项目,自动合成

    1 <link rel=stylesheet href="../lib/codemirror.css">
    2 <link rel=stylesheet href="../addon/merge/merge.css">
    3 <script src="../lib/codemirror.js"></script>
    4 <script src="../mode/xml/xml.js"></script>
    5 <script src="https://cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/diff_match_patch.js"></script>
    6 <script src="../addon/merge/merge.js"></script>

    配置参数 

    笔者在merge.js的 CodeMirror中注册了如下方法

     1  var value, orig1, orig2, dv, panes = 2, highlight = true, connect = null, collapse = false;
     2   CodeMirror.k_init=function(id,newData,oldData){
     3     value=oldData;//左侧 老文件
     4     orig1 = '';
     5     orig2=newData;//右侧 新文件
     6     initUI();
     7 
     8     function initUI() {
     9       if (value == null) return;
    10       var target = document.getElementById(id);
    11       target.innerHTML = "";
    12       var dv = CodeMirror.MergeView(target, {
    13         value: value,
    14         origLeft: panes == 3 && !collapse && !connect ? orig1 : null,
    15         orig: orig2,
    16         lineNumbers: true, //行号
    17         mode: "text/html",
    18         //theme:'3024-night',//修改主题
    19         styleActiveLine: true,
    20         matchBrackets: true,
    21         highlightDifferences: highlight,
    22         connect: connect,
    23         collapseIdentical: collapse,
    24         revertButtons:false,//事件比较替换
    25       });
    26     }
    27   };

     然后在外部js中直接调用 

    CodeMirror.k_init('codeMirror',jsonString.now_file_content,jsonString.old_file_content)

    效果如下

    单个文件查看

     1   CodeMirror.k_show=function(id,Data){
     2     value=Data;//左侧 老文件
     3     initUI();
     4     function initUI() {
     5       if (value == null) return;
     6       var target = document.getElementById(id);
     7       target.innerHTML = "";
     8       var dv = CodeMirror(document.getElementById(id), {
     9         value: value,
    10         lineNumbers: true,
    11         mode: "text/html",
    12         //theme:'3024-night',
    13         styleActiveLine: true,
    14         matchBrackets: true,
    15       });
    16     }
    17   };
    CodeMirror.k_show('codeMirror',jsonString.now_file_content)

    效果如下

    配置心得:

    1)修改主题

    引用 codemirror源码中theme文件下的css,添加配置theme,例 theme:'3024-night'; //修改主题

    2)修改不同部分背景颜色

    若行内容不用,dom结构会有所不同,故我直接修改css,  兄弟选择器确定元素

    .CodeMirror-merge-r-chunk+.CodeMirror-gutter-wrapper+.CodeMirror-line {
      background-color: #888;
    }
    .CodeMirror-merge-r-chunk+.CodeMirror-gutter-wrapper+.CodeMirror-line span {
      background-image: none;
    }

    3)高度修改

    修改merge.css ,

    .CodeMirror-merge, .CodeMirror-merge .CodeMirror {
      height: 600px;
    }

    4)revertButtons参数 关闭中间替换事件,隐藏替换按钮

    http://codemirror.net/demo/merge.html

  • 相关阅读:
    【leetcode】N叉树的前序遍历
    【leetcode】第 N 个泰波那契数
    【leetcode】下一个更大元素 I
    【leetcode】Nim 游戏
    【leetcode】非递减数列
    053-208
    053-211
    053-56
    053-53
    053-236
  • 原文地址:https://www.cnblogs.com/blog-index/p/6694658.html
Copyright © 2020-2023  润新知