请教 Vue 如何使用 CodeMirror 的 MergeView(代码差异对比)?

先上示例:
http://codemirror.net/demo/me...

这是官方的示例,我想在 vue 中使用,试了好多方法,没有成功。

我看过 gitHub 上有 vue-codemirror,vue-codemirror-lite 等,好像只能使用普通文本编辑功能,没有 merge view 的功能。


这是我在组件中的使用代码示例:

<template>
  <div>
    <div id="editor" ref="editor"></div>
  </div>
</template>

<script>
// 我按照官方页面的方式把需要的库引进来
import CodeMirror from 'codemirror'
// 我把diff_match_patch存到本地了
import './diff_match_patch'
import 'codemirror/addon/merge/merge'

export default {
  data () {
    return {}
  },
  mounted () {
    // 这是官方使用 mergeView 的示例,
    // 我这样用会提示:diff_match_patch 的错误
    CodeMirror.MergeView(this.$refs.editor, {
      lineNumbers: true
    })
    
    // 另外,这样使用没有错误,但就是一个简单的文本编辑器:
    CodeMirror(this.$refs.editor, {
      lineNumbers: true
    })
  }
}


</script>

阅读 11.6k
2 个回答

已自行解决,出错原因是谷歌算法最后导出的变量是 this ,这在浏览器环境下可行,把变量换成全局的就好了。

可以粘贴一下相关代码吗?方便分析问题

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题