CodeMirror（Web组件）

Yisui9_

于 2025-06-17 08:55:49 发布

阅读量284

点赞数 6

CC 4.0 BY-SA版权

文章标签：前端 javascript

本文链接：https://blog.csdn.net/Yisui9_/article/details/148694543

代码编辑器组件（version 5.65.19）

参考:CodeMirror 5 User Manual

一、Configuration选项设置：

//CodeMirror选项设置
codeMirrorOptions:{
value: undefined,               //新内容
origLeft: null,           
orig: undefined,                //旧内容
lineNumbers: true,              //行号
mode: "application/xml",              //代码模式
highlightDifferences: true,     //高亮显示差异部分
collapseIdentical: true,        //折叠
readOnly:true,                  //只读
revertButtons:false,            
},

collapseIdentical：true-默认折叠相同代码行数>2的部分（会剩下相同行数<=2的代码部分）
输入number 折叠相同代码>number的部分 （但输入0不会折叠）

二、实例信息/方法

1.this.codeMirorInstance.right.chunks

获取different chunk(下标从0开始)

chunk中存在四个字段 editFrom/editTo origFrom/origTo 代表差异开始下标[editFrom,editTo)

2.this.codeMirorInstance.right.edit.doc.getLine[Programming API]

根据下标取代码的内容

//获取差异

//edit
let diffCount = this.codeMirorInstance.right.chunks.length;
for(let i = 0;i<diffCount;i++){
let start  = this.codeMirorInstance.right.chunks[i].editFrom;
let end = this.codeMirorInstance.right.chunks[i].editTo;
for(let j = start ; j< end ; j++){
let context = this.codeMirorInstance.right.edit.doc.getLine(j);
this.diffEdit.push(context)
}
}
console.log(this.diffEdit)
//orig
diffCount = this.codeMirorInstance.right.chunks.length;
for(let i = 0;i<diffCount;i++){
let start  = this.codeMirorInstance.right.chunks[i].origFrom;
let end = this.codeMirorInstance.right.chunks[i].origTo;
for(let j = start ; j< end ; j++){
let context = this.codeMirorInstance.right.orig.doc.getLine(j);
this.diffOri.push(context)
}
}