前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue集成mergely

vue集成mergely

作者头像
治电小白菜
发布2020-08-25 16:00:44
1.2K0
发布2020-08-25 16:00:44
举报
文章被收录于专栏:技术综合技术综合

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

image.png

示例代码

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

Mergely仓库地址

https://github.com/wickedest/Mergely

需要依赖

  • mergely
  • codemirror
  • jquery

webpack配置

在`vue.config.js'中

代码语言:javascript
复制
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'
      })
    ]
  }
}

使用方法

代码语言:javascript
复制
<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 fox\njumped over the hairy dog');
        },
        rhs: (setValue) => {
          setValue('the quick brown fox\njumped over the lazy dog');
        }
      });
    });
  }
}
</script>

<style lang="scss">
</style>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 示例代码
  • Mergely仓库地址
  • 需要依赖
  • webpack配置
  • 使用方法
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档