124.《sql，json编辑器之CodeMirror》

文章目录

CodeMirror使用说明书
- 001.视频展示
- 002.图文展示
- 003.gitee地址demo地址
sql编辑器所用到的npm包
codemirror 使用步骤
- 1.codemirror 引入核心库
- 2.页面容器
- 3.按需引入包文件
- 4.根据设置的主题，引入相应的主题包,主题包存储在theme下，使用其他主题包时设置配置项中theme为对应主题
- 5.根据设置的编辑器语言，引入相应工具包,以下为常用语言包
- 6. 将容器转换为编辑器
- 7.初始化可设置的值
- 8.事件触发器
- 9.API

CodeMirror使用说明书

001.视频展示

sql编辑器

002.图文展示

003.gitee地址demo地址

wqwqwqwqw	记得点赞
项目gitee地址	十分感谢

左侧是sql编辑器，右侧是json编辑器，这篇文章主要是 sql编辑器，但是gitee仓库上两个都会含有

sql编辑器的核心是 codemirror 插件

sql编辑器所用到的npm包

CodeMirror 编辑器
- ```
npm i codemirror
```
文件保存
- ```
npm i file-saver
```
sql 语句格式化
- ```
npm i sql-formatter
```

codemirror 使用步骤

使用步骤

1.codemirror 引入核心库

import * as CodeMirror from 'codemirror/lib/codemirror'
import 'codemirror/lib/codemirror.css'

2.页面容器

<textarea class="form-control" id="code" name="code"></textarea>

3.按需引入包文件

// 核心包
import * as CodeMirror from 'codemirror/lib/codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/addon/lint/lint.css'
// 主题
import 'codemirror/theme/mbo.css'
import 'codemirror/theme/monokai.css'
import 'codemirror/theme/3024-night.css'
import 'codemirror/theme/cobalt.css'
import 'codemirror/theme/erlang-dark.css'
import 'codemirror/theme/ambiance-mobile.css'
import 'codemirror/theme/liquibyte.css'
import 'codemirror/theme/idea.css'
// 滚动条样式
import 'codemirror/addon/scroll/simplescrollbars.css'
import 'codemirror/addon/scroll/simplescrollbars'
// 提示+自动补全
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/selection/active-line'
import 'codemirror/addon/lint/lint'
// import 'codemirror/addon/lint/sql-lint'
// import 'codemirror/addon/hint/sql-hint'// sql 格式化
let sqlFormatter = require('sql-formatter')
var FileSaver = require('file-saver')
require('codemirror/addon/edit/matchbrackets') // 匹配结束符号，比如"]、}"
// require('codemirror/addon/selection/active-line')
// 支持语言
require('codemirror/mode/sql/sql')
// 提示
require('codemirror/addon/hint/show-hint')
require('codemirror/addon/hint/sql-hint')

4.根据设置的主题，引入相应的主题包,主题包存储在theme下，使用其他主题包时设置配置项中theme为对应主题

import 'codemirror/theme/mbo.css'
import 'codemirror/theme/monokai.css'
import 'codemirror/theme/3024-night.css'
import 'codemirror/theme/cobalt.css'
import 'codemirror/theme/erlang-dark.css'
import 'codemirror/theme/ambiance-mobile.css'
import 'codemirror/theme/liquibyte.css'
import 'codemirror/theme/idea.css'

5.根据设置的编辑器语言，引入相应工具包,以下为常用语言包

import 'codemirror/mode/javascript/javascript'
import 'codemirror/mode/clike/clike'
import 'codemirror/mode/go/go'
import 'codemirror/mode/htmlmixed/htmlmixed'
import 'codemirror/mode/http/http'
import 'codemirror/mode/php/php'
import 'codemirror/mode/python/python'
import 'codemirror/mode/http/http'
import 'codemirror/mode/sql/sql'
import 'codemirror/mode/vue/vue'
import 'codemirror/mode/xml/xml'

6. 将容器转换为编辑器

  mounted () {let theme = 'monokai'const mime = { name: 'text/x-mysql' }let myTextarea = document.getElementById('editor')this.CodeMirrorEditor = CodeMirror.fromTextArea(myTextarea, {mode: mime, // 编辑器语言indentWithTabs: true,smartIndent: true, // 自动缩进是否开启lineNumbers: true, // 是否使用行号matchBrackets: true, // 括号匹配theme: theme, // 主题lineWrapping: 'wrap', // 在长行时文字是换行(wrap)还是滚动(scroll)scrollbarStyle: 'simple', // null 隐藏滚动条 "simple","overlay"选择内侧与外侧的滚动条// readOnly: true, 是否只读extraKeys: { Ctrl: 'autocomplete' } // ctrl可以弹出选择项})this.CodeMirrorEditor.setValue('select * from table where id = 3')// inputRead 当用户输入或粘贴时编辑器时触发this.CodeMirrorEditor.on('inputRead', () => {this.CodeMirrorEditor.showHint()})},

7.初始化可设置的值

value：string 初始化值
indentWithTabs：boolean // 使用制表符进行智能缩进
smartIndent ：boolean // 自动缩进是否开启
lineNumbers ：boolean // 是否使用行号
matchBrackets : boolean // 括号匹配
theme : string // 主题
lineWrapping : string // 在长行时文字是换行(wrap)还是滚动(scroll)
scrollbarStyle：boolean // null 隐藏滚动条 “simple”,"overlay"选择内侧与外侧的滚动条
readOnly: boolean // 是否只读
extraKeys: { Ctrl: ‘autocomplete’ } // ctrl 可以弹出选择项

8.事件触发器

inputRead方法为例

 // inputRead 当用户输入或粘贴时编辑器时触发this.CodeMirrorEditor.on('inputRead', () => {this.CodeMirrorEditor.showHint()})

取消触发器方法：

this.CodeMirrorEditor.off("inputRead")

配置项

“changes”：每次编辑器内容更改时触发
“beforeChange”：事件在更改生效前触发
“cursorActivity”：当光标或选中(内容)发生变化，或者编辑器的内容发生了更改的时候触发。
“keyHandled”:快捷键映射(key map)中的快捷键被处理(handle)后触发
“inputRead”:当用户输入或粘贴时编辑器时触发。
“electrictInput”:收到指定的electrict输入时触发
“beforeSelectionChange”:此事件在选中内容变化前触发
“viewportChange”：编辑器的视口( view port )改变（滚动，编辑或其它动作）时触发
“gutterClick”：编辑器的gutter(行号区域)点击时触发
“focus”：编辑器收到焦点时触发
“blur”:编辑器失去焦点时触发
“scroll”:编辑器滚动条滚动时触发
“keydown”, “keypress”, “keyup”，“mousedown”, “dblclick”硬件事件触发器

9.API

this.CodeMirrorEditor.setValue(“Hello Kitty”)：设置编辑器内容
this.CodeMirrorEditor.getValue()：获取编辑器内容
this.CodeMirrorEditor.getLine(n):获取第n行的内容
this.CodeMirrorEditor.lineCount()：获取当前行数
this.CodeMirrorEditor.lastLine()：获取最后一行的行号
this.CodeMirrorEditor.isClean():boolean类型判断编译器是否是clean的
this.CodeMirrorEditor.getSelection()：获取选中内容
this.CodeMirrorEditor.getSelections():返回array类型选中内容
this.CodeMirrorEditor.replaceSelection(“替换后的内容”):替换选中的内容
this.CodeMirrorEditor.getCursor():获取光标位置,返回{line,char}
this.CodeMirrorEditor.setOption(“”,“”):设置编译器属性
this.CodeMirrorEditor.getOption(“”):获取编译器属性
this.CodeMirrorEditor.addKeyMap(“”,“”):添加key-map键值，该键值具有比原来键值更高的优先级
this.CodeMirrorEditor.removeKeyMap（“”）:移除key-map
this.CodeMirrorEditor.addOverlay(“”):Enable a highlighting overlay…没试出效果
this.CodeMirrorEditor.removeOverlay（“”）:移除Overlay
this.CodeMirrorEditor.setSize(width,height):设置编译器大小
this.CodeMirrorEditor.scrollTo(x,y):设置scroll到position位置
this.CodeMirrorEditor.refresh():刷新编辑器
this.CodeMirrorEditor.execCommand(“命令”):执行命令

124.《sql，json编辑器之CodeMirror》相关推荐

那些年啊，那些事——一个程序员的奋斗史 ——124
既然已经提出了离职,那么这段时间对于段伏枥来说是非常轻松的.不用去考虑什么代码,不用去考虑什么公司的前途,甚至是所谓的责任感也可以暂时丢在一边.每天都可以正常上下班,也不用去惧怕武总的脸色:你要是不爽 ...
关于《那些年啊，那些事——一个程序员的奋斗史》——24提到的鼻炎治疗方法
在<那些年啊,那些事--一个程序员的奋斗史>--24中有提到用清水治疗鼻炎的方法,很多朋友在留言或email都有问到这问题,在此一并做个回答. 简单说说norains的鼻炎 ...
《那些年啊，那些事——一个程序员的奋斗史》十四(完结)
125 距离离职交接的一个月时间还剩几天,本来应该是平淡无事的,却没想到最后还是波澜四起.昨天下班前,公司突然停了电.这本是件普通得不能再普通的事情,可没想到过了一会来电了,或许是波峰电压太大,或许是 ...
《那些年啊，那些事——一个程序员的奋斗史》——128 (终章)
周五,如约而至.张文香果然没有被邀请,武总自然也是被排除之列,来的都是平时大家谈得比较来的.几个月不见,小黑和小蓝还是老样子,但精神相比以前是好多了:麦吉则没什么太大的变化,倒是陈莉胖了不少,颇有一番 ...
关于那些年啊，那些事——一个程序员的奋斗史 ——24提到的鼻炎治疗方法
分享一下我老师大神的人工智能教程.零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow 在<那些年啊 ...
关于那些年啊那些事一个程序员的奋斗史 24提到的鼻炎治疗方法
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 在< ...
《那些年啊，那些事——一个程序员的奋斗史》——79
旧的4.3＇主板是废弃了,新的带CMMB的板子开始了.对于新的板子来说,其实只是在旧的板子上做改动,比如删掉蓝牙模块啊,去掉视频输入啊等:最大的不同,只是根据Telechips的原理图增加CMMB部分 ...
那些年啊，那些事——一个程序员的奋斗史 ——23
分享一下我老师大神的人工智能教程.零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow "开会咯 ...
《那些年啊，那些事——一个程序员的奋斗史》——23
"开会咯!"黄华中在研发部嚷了一下,让大家到外面的会议桌去.说起来,自从段伏枥来到这公司以来,已经差不多有好几个月,却连一个会都没有开过,甚至是小一点的内部会议都没有.为什么突然间 ...
《那些年啊，那些事——一个程序员的奋斗史》——117
这段时间段伏枥在折腾.NET Micro Framework的时候,终于体会到什么叫举步维艰了.因为这玩意没有操作系统做支撑,直接是操作硬件,有时候出问题了,根本就不知道是如何引起的. 比如说,在移植 ...

124.《sql，json编辑器之CodeMirror》

文章目录

CodeMirror使用说明书

001.视频展示

002.图文展示

003.gitee地址demo地址

sql编辑器所用到的npm包

codemirror 使用步骤

1.codemirror 引入核心库

2.页面容器

3.按需引入包文件

4.根据设置的主题，引入相应的主题包,主题包存储在theme下，使用其他主题包时设置配置项中theme为对应主题

5.根据设置的编辑器语言，引入相应工具包,以下为常用语言包

6. 将容器转换为编辑器

7.初始化可设置的值

8.事件触发器

9.API

124.《sql，json编辑器之CodeMirror》相关推荐

最新文章

热门文章