<template
>
<
div
class
="in-coder-panel"
>
<
textarea
ref="textarea"
placeholder
="請輸入查詢sql"
>
textarea
>
div>
template
>
<
script
type
="text/ecmascript-6"
>
//引入全域性例項
import _codemirror from
'codemirror'//
核心樣式
import
'codemirror/lib/codemirror.css'//
引入主題後還需要在 options 中指定主題才會生效
import
'codemirror/theme/cobalt.css
'import
'codemirror/theme/base16-light.css
'import
"codemirror/addon/hint/show-hint.css";
//需要引入具體的語法高亮庫才會有對應的語法高亮效果
import
'codemirror/mode/sql/sql.js
'require(
"codemirror/addon/hint/show-hint");
require(
"codemirror/addon/hint/sql-hint");
//嘗試獲取全域性例項
const codemirror
=window.codemirror
||_codemirror
export
default
, },
data () },}
},mounted () ,
methods:
})this
.coder.on(
"inputread
", ()
=>
); },
}}script
>
<
style
lang
="less"
>
.in-coder-panel
} .code-mode-select
}style
>
官網：主題效果展示：
codemirror使用總結
這裡使用的是自己公司封裝的元件 直接上 吧 儲存取消 define libs sql formatter dist sql formatter.min.js libs codemirror 5.2 lib codemirror.js libs codemirror 5.2 mode sql sql....
關於codeMirror外掛程式使用的乙個坑
codemirror外掛程式可以做語法高亮渲染，但它操作過程是這樣的 先從 textarea中讀取值放到codemirror動態生成的div中，根據textarea中的換行個數確定行數，根據正則表達來高亮語法。這就有個問 題，當你在頁面上對語法做出修改提交表單時，其實只是在codemirror上的動...
關於codeMirror外掛程式使用的乙個坑
codemirror外掛程式可以做語法高亮渲染，但它操作過程是這樣的 先從 textarea中讀取值放到codemirror動態生成的div中，根據textarea中的換行個數確定行數，根據正則表達來高亮語法。這就有個問 題，當你在頁面上對語法做出修改提交表單時，其實只是在codemirror上的動...