web网页嵌入代码编辑器

在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;

}