文章目錄

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

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