codemirror

1.首先先安装好依赖包

npm install codemirror yarn add codemirror

2.引入性对应的依赖包

import 'codemirror/theme/ambiance.css'; import 'codemirror/lib/codemirror.css'; import 'codemirror/addon/hint/show-hint.css'; const CodeMirror = require('codemirror'); require('codemirror/addon/edit/matchbrackets'); require('codemirror/addon/selection/active-line'); require('codemirror/mode/javascript/javascript'); require('codemirror/addon/hint/show-hint'); require('codemirror/keymap/sublime.js'); require('codemirror/addon/selection/active-line.js'); require('codemirror/addon/edit/matchbrackets.js'); require('codemirror/addon/display/autorefresh.js');

3.挂载textarea标签

<textarea ref="mycode" class="textarea" v-model="textarea"></textarea>

4.实例CodeMirror

mounted() { this.editorText = CodeMirror.fromTextArea(this.$refs.mycode, { mode: { name: 'javascript', globalVars: true }, indentWithTabs: true, smartIndent: true, lineNumbers: true, matchBrackets: true, autoRefresh: true, extraKeys: { Ctrl: 'autocomplete' }, // 自定义快捷键 hintOptions: { // 自定义提示选项 tables: { users: ['name', 'score', 'birthDate'], countries: ['name', 'population', 'size'], }, }, }); // 可选,挂载一下监听事项 this.editorText.on('change', (cm: any) => { this.code = cm.getValue(); // 这里要用多一个载体去获取值,不然会重复赋值卡顿 }); } 刷新等问题

注意要注册一个刷新事件,方便调用

refresh() { this.$nextTick(() => { this.editorText.refresh(); }); }

手动set值进去后要刷新

setValue(value:string){ this.cminstance.setValue(this.textarea); this.refresh(); } 讲一下依赖包的引入

因为官方文档是全英文,而且写的十分零散

https://codemirror.net/

如果是更换语言的话可以在node_modules 里面找 对应修改位置

---

小聪也是刚刚开始接触这个插件,还在研究,之后有新的收获就会更新到这篇文章

---

2021-04-20 更新

更换主题

theme:更换主题,主题包在 更改引用的css样式 下面是例子:

material-darker

3024-day

剩下的下面就在theme里面同名更换就好了

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。