CodeMirror 使用

2018/11/20 19:28
阅读数 3K

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

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部