在web网页里面嵌入编辑器codemirror第三方插件
呈现效果
“
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', // 编辑语言
theme:"3024-night", //主题
styleActiveLine: true,
lineNumbers: true, //显示行数
line: true,
foldgutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter","CodeMirror-lint-markers"],
lineWrapping: true, //代码折叠
foldGutter: true,
matchBrackets: true, //括号匹配
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;
}
