快捷導(dǎo)航

CodeMirror實(shí)現(xiàn)代碼對(duì)比功能(插件react vue)

更新時(shí)間：2022年05月11日 10:14:43 作者：接著奏樂(lè)接著舞。

這篇文章主要介紹了CodeMirror實(shí)現(xiàn)代碼對(duì)比功能,用到的插件有vue或者react都需要這一步且同樣的下載方式，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下

要實(shí)現(xiàn)一個(gè)需求：一個(gè)代碼編輯器，用戶(hù)上次寫(xiě)的代碼和現(xiàn)在的代碼要區(qū)分出不同。網(wǎng)上找了幾個(gè)案例，拿過(guò)去一用差點(diǎn)氣吐血，報(bào)錯(cuò)像雪花一樣，浪費(fèi)時(shí)間！

本文中的代碼，一鍵粘貼拿來(lái)即用，代碼就是我在寫(xiě)這篇文章時(shí)寫(xiě)的demo，絕無(wú)報(bào)錯(cuò)。

1.第一步：下載插件

vue或者react都需要這一步且同樣的下載方式。

npm install diff-match-patch save
npm install codemirror save
用yarn的話(huà) npm install 替換成 yarn add …

2.vue代碼如下：

建一個(gè)空白.vue文件然后一鍵復(fù)制以下代碼：

<template>
  <div ref="codeMirror" class="code-contrast" style="width:100%;height:100%" />
</template>
 
<script>
import CodeMirror from 'codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/addon/merge/merge.js'
import 'codemirror/addon/merge/merge.css'
import DiffMatchPatch from 'diff-match-patch'
window.diff_match_patch = DiffMatchPatch
window.DIFF_DELETE = -1
window.DIFF_INSERT = 1
window.DIFF_EQUAL = 0
 
export default {
  name: 'CodeMirror',
 
  data() {
    return {
      oldValue: '我們到現(xiàn)在還是一樣的',
      newValue: '我們到現(xiàn)在還是一樣的，這幾個(gè)字給我標(biāo)個(gè)紅吧！',
      isReadOnly: false
    }
  },
  watch: {
    oldValue: {
      immediate: true,
      handler() {
        this.$nextTick(() => {
          this.initUI()
        })
      }
    },
    newValue: {
      immediate: true,
      handler() {
        this.$nextTick(() => {
          this.initUI()
        })
      }
    }
  },
  methods: {
    initUI() {
      if (this.newValue == null) return
      const target = this.$refs.codeMirror
      target.innerHTML = ''
      CodeMirror.MergeView(target, {
        value: this.oldValue, // 上次內(nèi)容
        origLeft: null,
        orig: this.newValue, // 本次內(nèi)容
        lineNumbers: true, // 顯示行號(hào)
        mode: 'text/html',
        highlightDifferences: true,
        connect: 'align',
        readOnly: this.isReadOnly // 只讀 不可修改
      })
    }
  }
}
</script>
<style lang="scss">
.code-contrast .CodeMirror-merge-copy,
  .CodeMirror-merge-scrolllock-wrap {
 
    display: none !important;
 
}
</style>

效果圖：

細(xì)節(jié)處對(duì)比：

3.react hooks代碼如下：

記得先下載第一步的文件然后再一鍵復(fù)制。

對(duì)比效果圖如下：

import React, { useEffect, useState, useRef } from 'react'
import CodeMirror from 'codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/addon/merge/merge.js'
import 'codemirror/addon/merge/merge.css'
import DiffMatchPatch from 'diff-match-patch'
export default function Demo () {
  window.diff_match_patch = DiffMatchPatch
  window.DIFF_DELETE = -1
  window.DIFF_INSERT = 1
  window.DIFF_EQUAL = 0
  const [num, setNum] = useState(10)
  const [oldValue, setOldValue] = useState('11111111111')
  const [newValue, setNewValue] = useState('11111111112222222222')
  const [isReadOnly, setIsReadOnly] = useState(false)
 
  const codeMirror = useRef(null)
  const initUI = () => {
    if (newValue == null) return
    const target = codeMirror.current
    console.log(target, '00000000000')
    target.innerHTML = ''
    CodeMirror.MergeView(target, {
      value: oldValue, // 上次內(nèi)容
      origLeft: null,
      orig: newValue, // 本次內(nèi)容
      lineNumbers: true, // 顯示行號(hào)
      mode: 'text/html',
      highlightDifferences: true,
      connect: 'align',
      readOnly: isReadOnly // 只讀 不可修改
    })
  }
  useEffect(() => {
    initUI()
  }, [newValue])
  useEffect(() => {
    initUI()
  }, [oldValue])
  return (
    <div>
      <div ref={codeMirror} className="code-contrast" style={{ width: '100%', height: '100%' }}></div>
    </div>
  )
}

4.一點(diǎn)心得

使用方法是：

有兩個(gè)數(shù)據(jù)，newvalue和oldvalue，舊數(shù)據(jù)代表著你上次的數(shù)據(jù)，新數(shù)據(jù)代表你現(xiàn)在正在寫(xiě)的數(shù)據(jù)，實(shí)際使用中，你先需要保存用戶(hù)上次寫(xiě)的數(shù)據(jù)，然后保存用戶(hù)新寫(xiě)的數(shù)據(jù)，再去對(duì)比。

可能會(huì)出現(xiàn)的問(wèn)題：