乐趣区

在线代码编辑器利器codeMirror

jiezi

说明

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 上提问，作者回复的也很快，非常好用，赞一个

退出移动版