在线代码编辑器利器-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上提问，作者回复的也很快，非常好用，赞一个