vue+codemirror 笔记一

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，例如

 实现过程 - 偷换概念

  第一想法： 通过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