CodeMirror 使用

codemirror是一款在线代码编辑器，官网：https://codemirror.net/doc/manual.html#overview

使用说明

第一步 安装： 

npm install codemirror

第二部 导入：

// import 'codemirror/' import CodeMirror from 'codemirror' import 'codemirror/lib/codemirror.css' // 引入mode 这里是sql import 'codemirror/mode/sql/sql' // 引入代码提示 import 'codemirror/addon/hint/show-hint.css' import 'codemirror/addon/hint/show-hint' // 上边两个是定义提示的前提，下边定义自动提示是哪一种模式，此处为sql import 'codemirror/addon/hint/sql-hint' // 引入keymap import 'codemirror/addon/comment/comment' import 'codemirror/keymap/sublime' import './code_editor.scss'

第三部 使用：这有三个方法，这里只贴出来推荐的方法。另外的请移步底部连接。

 this.editor = CodeMirror.fromTextArea(this.codeDom, { lineNumbers: true, keyMap: 'sublime', indentUnit: 4, tabSize: 4, mode: 'text/x-mysql', showCursorWhenSelecting: true, option: { autofocus: true }, // 这是针对sql有自定义表和字段的，这样能够把本身的表和字段也放入提示里。若是数据是异步请求获取的，能够经过editor.setOption('hintOptions', data)  hintOptions: { tables: { table1: [ 'col_A', 'col_B', 'col_C' ], table2: [ 'other_columns1', 'other_columns2' ] } } })

最后：还有不少options，能够参考官网，以及api和方法。

实例：（redux+react）import * as React from 'react'

import { connect } from 'react-redux' import CodeMirror from 'codemirror' // import 'codemirror/' import 'codemirror/lib/codemirror.css' // 引入mode import 'codemirror/mode/sql/sql' // 引入代码提示 import 'codemirror/addon/hint/show-hint.css' import 'codemirror/addon/hint/show-hint' // 上边两个是定义提示的前提，下边定义自动提示是哪一种模式，此处为sql import 'codemirror/addon/hint/sql-hint' // 引入keymap import 'codemirror/addon/comment/comment' import 'codemirror/keymap/sublime' import './code_editor.scss' // hiui import Button from '@hi-ui/hiui/es/button' import Modal from '@hi-ui/hiui/es/modal' import Input from '@hi-ui/hiui/es/input' import { handleNotificate } from '@hi-ui/hiui/es/notification' // actions import { changeTableID, changeEditorValue, fetchFavoritesTable, fetchHitoryTable, clearIntervalFunc, saveEditor } from '../../../actions/adhoc' class CodeEdit extends React.Component { constructor (props) { super(props) this.state = { value: 'select 1', collectTitle: '', show: false } this.editor = null } componentDidMount () { this.editor = CodeMirror.fromTextArea(this.codeDom, { lineNumbers: true, keyMap: 'sublime', indentUnit: 4, tabSize: 4, mode: 'text/x-mysql', showCursorWhenSelecting: true, option: { autofocus: true }, // 这是针对sql有自定义表和字段的，这样能够把本身的表和字段也放入提示里。若是数据是异步请求获取的，能够经过editor.setOption('hintOptions', data)  hintOptions: { tables: { table1: [ 'col_A', 'col_B', 'col_C' ], table2: [ 'other_columns1', 'other_columns2' ] } } }) // 讲editor实例传入redux saveEditor(this.editor) // 将自动提示绑定到change事件上，这样输入的时候就能够看到联想的关键词 this.editor.on('change', (instance, change) => { // 自动补全的时候，也会触发change事件，全部坐下判断，以避免死循环，正则是为了避免让空格，换行之类的也提示 // 经过change对象你能够自定义一些规则去判断是否提示 if (change.origin !== 'complete' && /\w|\./g.test(change.text[0])) { instance.showHint() } }) } // 获取编辑器的内容，以便提交 getTextareaCode = () => this.editor.getValue()
 render () { const { collectTitle } = this.state const { adhoc } = this.props const { editorValue } = adhoc return ( <form style={{ height: 418, width: '100%' }}> <textarea ref={p => { this.codeDom = p }} placeholder='code goes here...' /> </form>  ) } } export default connect((state) => { const { adhoc } = state return { adhoc } })(CodeEdit)

• 清空编辑框：this.editor.setValue('')
• 格式化： 尚未找到。。。等待后续更新

 

给了我巨大帮助的文章：https://blog.csdn.net/qq_41132952/article/details/78596008