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