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
CodeMirror 使用的更多相关文章
- CodeMirror简介
Javascript由于其作为Web标准的独特地位,很多人甚至希望它能一统前后端开发. Javascript的本质工作首先肯定的Web前端开发,本文主要想介绍的CodeMirror是一款Web Edi ...
- 如何用Selenium 向CodeMirror 编辑器输入
用Selenium 自动填写Jenkins上面一个文本输入框,通过css定位很容易,但是输入文字的时候会报错 ElementNotVisibleException: Message: Element ...
- codeMirror的简单使用,js比较文本差异(标注出增删改)
最近项目需要使用比较文本的差异的功能,在同事的推荐下,使用js脚本来比较,所以codeMirror变成了选择. 当然codeMirror中有其他功能,比较文本差异的只是其中一个功能,本人不在此做介绍, ...
- codeMirror插件使用讲解
codeMirror是一款十分强大的代码编辑插件,提供了十分丰富的API,最近在项目中用到了这款插件,于是在这里给大家分享下使用方法和心得: codeMirror调用非常方便 首先在页面中载入插件CS ...
- 在线代码编辑器CodeMirror简介
1.什么是Code Mirror 最近做一个项目需要在网页上实现一个代码编辑器,支持语法高亮.自动缩进.智能提示等功能.发现Code Mirror刚好满足所有需求.Code Mirror是由js写的一 ...
- 关于codeMirror插件使用的一个坑
codeMirror插件可以做语法高亮渲染,但它操作过程是这样的:先从 textarea中读取值放到codemirror动态生成的div中,根据textarea中的换行个数确定行数,根据正则表达来高亮 ...
- codemirror和ace editor的语法高亮
两个javascript库用做在线代码编辑器都是非常优秀的选择 我这两天对这两个类库做了简单的研究,重点是语法高亮的自定义: ace editor的主要思路是生成状态机,从一个startstate开始 ...
- 使用CodeMirror在浏览器中实现编辑器的代码高亮效果
使用CodeMirror在浏览器中实现编辑器的代码高亮效果 在网站后台管理中希望能够对网站的样式表css与js文件以及模板html进行管理,在编辑的时候只是以普通文本展示又太普通,显得好难看,于是便在 ...
- CodeMIrror 简单使用
代码高亮是程序员的刚需,不管是在笔记类,论坛类,博客类web网站中,都对代码高亮提出要求,不高亮的代码阅读体验很差,codeMirror是一个前端代码高亮库,使用方便. codeMirror可以直接在 ...
- codemirror 插件
做在线词典编辑的时候.里面有些自定义标签.类似html标签一样. 为了让编辑编辑.改成了 <动词></动词> 所以引用了 codemirror插件 此插件绝对牛逼 它主要功能 ...
随机推荐
- linux下如何把php升级到5.6
1: 进入终端后查看php版本 php -v 输出可能如下: PHP (cli) (built: Nov ::) Copyright (c) - The PHP Group Zend Engine v ...
- [Swift-2019力扣杯春季初赛]4. 从始点到终点的所有路径
给定有向图的边 edges,以及该图的始点 source 和目标终点 destination,确定从始点 source 出发的所有路径是否最终结束于目标终点 destination,即: 从始点 so ...
- Redis数据结构以及应用场景
1. Redis数据结构以及应用场景 1.1. Memcache VS Redis 1.1.1. 选Memcache理由 系统业务以KV的缓存为主,数据量.并发业务量大,memcache较为合适 me ...
- Spark从入门到精通(一)
什么是Spark 大数据计算框架 离线批处理 大数据体系架构图(Spark) Spark包含了大数据领域常见的各种计算框架:比如Spark Core用于离线计算,Spark SQL用于交互式查询,Sp ...
- 《你不知道的JavaScript(上卷)》读书笔记
第一次尝试用思维导图记笔记,感觉还不错~~~不过还是改不了我读书笔记写成抄书笔记的毛病 =.= 因为开始学JS的时候,一般浏览器就已经支持ES6了,所以比较喜欢使用ES6语法,let,=>等,文 ...
- RestyCircuitBreaker --- openresty断路器
简介 由于某些场景下服务提供方和调用方都无法做到可用性,当系统远程调用时,可能会因为某些接口变慢导致调用方大量HTTP连接被阻塞而引发雪崩. 解决思路如下: 服务提供方实现接口快速失败,当处理时间达到 ...
- SkyWalking-netcore
详细安装步骤:https://www.jianshu.com/p/3ddd986c7581?from=groupmessage SkyWalking-netcore 官网:https://github ...
- 【python】版本35 正则-非库-爬虫-读写xlw文件
#交代:代码凌乱,新手一个,论坛都是高手,我也是鼓了很大勇气,发出来就是被批评和进步的 #需求:需要对某网站的某id子标签批量爬取,每个网页的id在xlw里,爬取完,再批量存取到这xlw里的第6行 ...
- Android--Service之提高
前言 上一篇博客讲解了一下Android下Service组件的基本使用,对Service组件还不了解的朋友可以先去看看另外一篇Service基础的博客:Android--Service之基础.这篇博客 ...
- [java核心外篇]__Object类与对象类型的转型
前言 我们在之前的学习中提过很多次了,java是面向对象的,java的基础可以说是建立在类和对象上面的.然后我们又学到了类的继承,发现了在java类库中,类的继承是极为普遍的,一个类继承另一个类,就像 ...