當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2023/12/10 编程问答 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 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.頁面容器

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》的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： aix查看lv_Aix 添加VG，LV并
下一篇： 2362:Square 能否拼接为正方