共计 1366 个字符,预计需要花费 4 分钟才能阅读完成。
说明
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 上提问,作者回复的也很快,非常好用,赞一个
正文完
发表至: javascript
2019-04-29