1.安装依赖
npm install vue-codemirror --save-dev
2.在main.js中使用
import 'codemirror/lib/codemirror.css'
import "codemirror/addon/hint/show-hint.css";
3.使用的页面
<div class="codemirror-container"> <codemirror v-model="currCode" :options="cmOptions" class="code-mirror" @ready="onCmReady3" @focus="onCmFocus" @input="onCmCodeChange" ref="myCmGenerate" @scroll="onScrollFn"> </codemirror> </div>
<script>
import { codemirror } from 'vue-codemirror'
import "codemirror/mode/python/python.js" //引入对应的mode的js和主题的css 由于我使用的是python的模板 - 根据自己的需求去引入相应的js
import 'codemirror/theme/material.css' /不同主题的css
export default {
name: 'CodeMirror',
components: {
codemirror
},
data(){
return{
cmOptions:{
tabSize: 4, // tab
indentUnit: 4,
styleActiveLine: true, // 高亮选中行
lineNumbers: true, // 显示行号
styleSelectedText: true,
line: true,
foldGutter: true, // 块槽
gutters: ['CodeMirror-linenumbers', "lock", "warn"],
highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true }, // 可以启用该选项来突出显示当前选中的内容的所有实例
// mode: { // 模式, 可查看 codemirror/mode 中的所有模式
// name: 'javascript',
// json: true
// },
mode:'python',
// hint.js options
hintOptions: {
// 当匹配只有一项的时候是否自动补全
completeSingle: false
},
// 快捷键 可提供三种模式 sublime、emacs、vim
keyMap: 'sublime',
matchBrackets: true,
showCursorWhenSelecting: false,
// scrollbarStyle:null,
// readOnly:true, //是否只读
theme: 'material', // 主题 material
lineNumberFormatter:function(){
//当前的this指向是cmOptions;
return arguments[0]+this.lastLineBefore;
},
extraKeys: { 'Ctrl': 'autocomplete' }, // 可以用于为编辑器指定额外的键绑定,以及keyMap定义的键绑定
lastLineBefore:0
},
CodeMirrorEditor:null,
wholecode:""
}
},
mounted(){
this.CodeMirrorEditor = this.$refs.myCmGenerate.codemirror;
}
}
背景:code编辑器中的代码是由多个代码块儿组成的;代码块儿是由页面上的模块生成的;
功能一:当点击页面上的模块时,编辑器中只显示当前模块的代码 ,显示在整个代码中所处的行数;且不可编辑,只读,并且在增加锁定的icon,例如
![](https://img2020.cnblogs.com/blog/1012801/202004/1012801-20200401165317318-916079590.png)
实现过程 - 偷换概念
第一想法: 通过this.CodeMirrorEditor.setValue("想要更新的内容"),将整个编辑器中的内容换成了想要展示的部分代码,那如果这样的话,那开始的行数就为0了,如何保证行数的正确呢?(当前代码在整个代码中所处的行数)
1)就需要始终都更新编辑器中的全部内容this.wholecode
2)当每次点击的时候,都先通过this.CodeMirrorEditor.setValue(this.wholecode);将全部的内容赋值
3)然后通过this.CodeMirrorEditor.lineCount(),获取到总行数, 如 var lineTotal = this.CodeMirrorEditor.lineCount(),lineObj={};
4)使用循环,获取到每行的内容,并合并成一个对象
for(var i=0;i<lineTotal;i++){
let itemStr = this.CodeMirrorEditor.lineInfo(i).text;
lineObj[i] = itemStr;
};
5)根据已知的点击的模块的特有名称,找到对应的开始和结束的行数start,end
6)重要的一步 - 偷换概念,利用this.CodeMirrorEditor.setOption("firstLineNumber",start);
firstLineNumber -- 表示开始的函数,默认是0
7)设置锁定的icon
1.首先要 创建小锁的html
makeLock(){
var t = document.createElement("i");
t.classList.add("ivu-icon");
t.classList.add("ivu-icon-ios-lock");
t.style.color= "#537f7e";
return t;
},
2.设置
this_.CodeMirrorEditor.setGutterMarker(0, "lock", this_.makeLock());
this_.CodeMirrorEditor.setGutterMarker(end-start, "lock", this_.makeLock());
setGutterMarker -- 设置在行数旁边的自定义内容
3.每次在点击模块的时候,都首先要清除Gutter
使用 this.CodeMirrorEditor.setValue("当前模块的代码")
完成!
功能二:
1.安装依赖
[1. Ānzhuāng yīlài]
1. install dependencies