在web網(wǎng)頁(yè)里面嵌入編輯器codemirror第三方插件
呈現(xiàn)效果
“
https://codemirror.net/doc/manual.html
1.安裝
npm install vue-codemirror --save
2.組件引用
import { codemirror } from 'vue-codemirror'
import 'codemirror/mode/sql/sql.js'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/3024-night.css';
import "codemirror/addon/fold/foldgutter.css"
import 'codemirror/addon/fold/foldcode.js';
import 'codemirror/addon/fold/foldgutter.js';
import 'codemirror/addon/fold/xml-fold.js';
import 'codemirror/addon/fold/indent-fold.js';
import "codemirror/addon/fold/brace-fold";
import 'codemirror/addon/fold/markdown-fold.js';
import 'codemirror/addon/fold/comment-fold.js';
import 'codemirror/addon/selection/active-line';
import 'codemirror/addon/edit/closebrackets';
import 'codemirror/addon/edit/matchbrackets'
``
``
<codemirror? ref="myCm"
v-model="content" :options="cmOptions" class="code"></codemirror>
``
cmOptions: {
tabSize: 4,? ? ? ?
mode: 'sql',? ? ? ?// 編輯語(yǔ)言
theme:"3024-night",? ? ? ?//主題
styleActiveLine: true,? ? ? ?
lineNumbers: true,? ? ? ?//顯示行數(shù)
line: true,? ? ? ?
foldgutter: true,? ? ? ?
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter","CodeMirror-lint-markers"],? ? ? ?
lineWrapping: true, //代碼折疊? ? ? ? ?
foldGutter: true,? ? ? ? ?
matchBrackets: true,? //括號(hào)匹配? ? ? ? ?
autoCloseBrackets: true
},
.code {
width:70%;padding:0;
text-align:left;
font-size: 11pt;
font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
}
