在線代碼編輯器利器-codeMirror

說明

codeMirror是一款十分強大的代碼編輯插件，提供了十分豐富的API，最近在項目中用到了這款插件，作一個記錄。

官網

github地址

安裝

• 下載安裝包 在github上直接download 或者 clone
• npm 安裝

  npm install --save  codemirror
  複製代碼

引入

• 手動引入外部的

<link href="./static/codemirror/lib/codemirror.css" rel="stylesheet" > // 必要
<script src="./static/codemirror/lib/codemirror.js"></script> // 必要
<script src="./static/codemirror/mode/sql/sql.js"></script> // 在線編輯的語言 sql
<script src="./static/codemirror/mode/sql/javscript.js"></script> // 在線編輯的語言 javascript
複製代碼

• npm引入（vue項目中）

import "codemirror/lib/codemirror.css" //必要
const CodeMirror = require("codemirror/lib/codemirror") // 必要
require("codemirror/mode/sql/sql") // 在線編輯的語言 sql
require('codemirror/addon/display/placeholder') // 須要使用placeholder屬性
複製代碼

使用

• 基本使用

<template>
    <textarea placeholder="例如select * from table" ref="myCodeMirror"></textarea>
</template>

<script>
import "codemirror/lib/codemirror.css" //必要
const CodeMirror = require("codemirror/lib/codemirror") // 必要
require("codemirror/mode/sql/sql") // 在線編輯的語言 sql
require('codemirror/addon/display/placeholder') // 須要使用placeholder屬性

export default {
    ...
    mounted () {
        this.myCodeMirror = CodeMirror.fromTextArea(this.$refs['myCodeMirror'], {
            lineNumbers: true, // 是否顯示行數
            mode: 'text/x-pgsql', // 使用什麼模式 text/x-pgsql是sql   javascript等
            showCursorWhenSelecting: true, // 當有選中的時候是否顯示光標
            extraKeys: {'Ctrl': 'autocomplete'} // 自定義快捷鍵
        })
    }
}
</script>
複製代碼

• 獲取輸入內容 this.myCodeMirror.getValue()
• 獲取選中內容 this.myCodeMirror.getSelection()

說明

官網提供了十分豐富的API，當有什麼問題是在github上提問，做者回復的也很快，很是好用，贊一個