vue集成mergely - 码农教程

mergely是一个可以进行文本对比的库, 编辑器基于codemirror

image.png

示例代码

https://github.com/klren0312/vue-mergely

Mergely仓库地址

https://github.com/wickedest/Mergely

需要依赖

mergely
codemirror
jquery

webpack配置

在`vue.config.js'中

const path = require('path')
const webpack = require('webpack')
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'mergely':      path.join(__dirname, 'node_modules', 'mergely'),
        'CodeMirror':   path.join(__dirname, 'node_modules', 'codemirror'),
        'jQuery':       path.join(__dirname, 'node_modules', 'jquery'),
        '$':            path.join(__dirname, 'node_modules', 'jquery')
      }
    },
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        CodeMirror: 'codemirror'
      })
    ]
  }
}

使用方法

<template>
  <div id="app"> 
    <div class="mergely-full-screen-8">
      <div class="mergely-resizer">
        <div id="mergely"></div>
      </div>
    </div>
  </div>
</template>

<script>
import 'codemirror/lib/codemirror.css'
import 'mergely/lib/mergely.css'
import 'mergely'

export default {
  name: 'App',
  mounted () {
    jQuery(document).ready(() => {
      jQuery('#mergely').mergely({
        lhs: (setValue) => {
          setValue('the quick red foxnjumped over the hairy dog');
        },
        rhs: (setValue) => {
          setValue('the quick brown foxnjumped over the lazy dog');
        }
      });
    });
  }
}
</script>

<style lang="scss">
</style>