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