Vue CodeMirror的地址:surmon-china/vue-codemirror: @codemirror code editor component for @vuejs (github.com)
Vue2的地址:surmon-china/vue-codemirror at v4.0.6 (github.com)
在Vue2中使用CodeMirror,需要注意,
1、需要在使用时引入样式的css文件,模块不会自己引入
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/base16-dark.css'
import 'codemirror/theme/idea.css'
import 'codemirror/theme/lesser-dark.css'
2、对于支持语言需要高亮显示,也需要引入相应的模块,否则无法高亮显示
import "codemirror/mode/htmlmixed/htmlmixed"
import "codemirror/mode/htmlembedded/htmlembedded"
import "codemirror/mode/javascript/javascript"
3、还需要引入的其它文件
import 'codemirror/addon/fold/foldcode.js';
import 'codemirror/addon/fold/foldgutter.css';
import 'codemirror/addon/fold/foldgutter.js';
import 'codemirror/addon/fold/brace-fold.js';
import 'codemirror/addon/fold/xml-fold.js';
import 'codemirror/addon/fold/indent-fold.js';
import 'codemirror/addon/fold/markdown-fold.js';
import 'codemirror/addon/fold/comment-fold.js';
import 'codemirror/addon/edit/closebrackets.js';
import 'codemirror/addon/edit/closetag.js';
import 'codemirror/keymap/sublime.js';
import 'codemirror/addon/hint/show-hint.css';
import 'codemirror/addon/hint/show-hint.js';
import 'codemirror/addon/hint/css-hint.js';
import 'codemirror/addon/hint/html-hint.js';
import 'codemirror/addon/hint/javascript-hint.js';
4、绑定到value的变量只能显示,在界面编辑代码后,不会自动更新,需要使用input事件,在事件中修改相应的变量
<codemirror :value="configcode" :options="configOption"
@input="onconfigCodeChange"></codemirror>
在onconfigCodeChange中修改configcode:
onconfigCodeChange(newCode){
this.configcode=newCode
}