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