用vue在前端寫一個代碼編輯器

想要讓使用者在頁面上可以編輯代碼，代碼若是寫在textarea就太low了，想要實現跟cmd一樣的命令行效果，codemirror支持你！

codemirror

安裝：

npm install vue-codemirror --save

html

<codemirror v-model="content" :options="options"></codemirror>

js

import {codemirror} from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
// 引入主題,配置后生效
import 'codemirror/theme/rubyblue.css'
//引入語言,配置后生效
import 'codemirror/mode/sql/sql.js'

export default {
    components: {
      codemirror
    },
    data() {
      return {
        //需編輯和顯示的內容
        content: '',
        // 默認配置
        options: {
          tabSize: 2, // 縮進格式
          theme: 'rubyblue', // 指定主題，對應主題庫 JS 需要提前引入
          lineNumbers: true, // 是否顯示行號
          //指定語言類型,如果需要編輯和顯示其他語言,需要import語言js然后修改此配置
          mode: 'sql',
          line: true,
          styleActiveLine: true, // 高亮選中行
          //是否為只讀,如果為"nocursor" 不僅僅為只讀 連光標都無法在區域聚焦
          readOnly: true,
          hintOptions: {
            completeSingle: true // 當匹配只有一項的時候是否自動補全
          }
        },
      }
    }
}

支持的語言

  import 'codemirror/mode/javascript/javascript.js'
  import 'codemirror/mode/css/css.js'
  import 'codemirror/mode/xml/xml.js'
  import 'codemirror/mode/clike/clike.js'
  import 'codemirror/mode/markdown/markdown.js'
  import 'codemirror/mode/python/python.js'
  import 'codemirror/mode/r/r.js'
  import 'codemirror/mode/shell/shell.js'
  import 'codemirror/mode/sql/sql.js'
  import 'codemirror/mode/swift/swift.js'
  import 'codemirror/mode/vue/vue.js'