vue文本比较插件

最新推荐文章于 2025-07-03 11:06:58 发布

韩大璐

最新推荐文章于 2025-07-03 11:06:58 发布

阅读量4.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_41257563/article/details/109092826

vue 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了如何在前端使用CodeMirror库配合diff-match-patch模块创建可实时比较和合并的代码编辑视图，适合开发者进行版本控制和协同编辑。通过实例展示了如何初始化UI并设置代码模式、行号和差异高亮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装

npm install codemirror
diff-match-patch diff-match-patch

使用

<div id="view"></div>

<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{
        
    }
</script>

methods: {
       initUI() {
            let value = this.old.content, orig2 = this.newData.content

            if (value == null) return;
            let target = document.getElementById("view");
            target.innerHTML = "";
            CodeMirror.MergeView(target, {
                value: value,//上次内容
                origLeft: null,
                orig: orig2,//本次内容
                lineNumbers: true,//显示行号
                mode: "text/html",
                highlightDifferences: true,
                connect: 'align',
                readOnly: true,//只读 不可修改
            });
        },
}

效果图如下：