Codemirror使用记录

.json-editor{高度：100%;位置：相对；}.json-editor>>>.CodeMirror{高度：自动；最小高度：250px；}.json-editor>>>.CodeMirror-scroll{最小高度：250px；}.json-editor>>>.cm-s-rubybluespan.cm-string{颜色：#f08047;}一、背景因为项目需要用到json编辑功能，所以尝试使用了v-jsoneditor、vue-json-editor和vue-codemirror，但都不尽如人意。经过一番尝试，成功满足了codemirror的要求，小记录一下。2.codemirror简介CodeMirror是一个使用JavaScript为浏览器实现的多功能文本编辑器。它专用于编辑代码，并具有多种语言模式和插件，可提供更高级的编辑功能。CodeMirror拥有丰富的API和CSS主题体系，方便用户自定义应用，易于扩展。本文主要针对vue项目中json的编辑功能。三、codemirror的使用1.需要的依赖npminstall--savecodemirrornpminstall--savejsonlint没有使用vue-codemirror，直接在vue中使用codemirror。另外需要安装一个开发依赖script-loader，方便jsonlint的引入。npminstall--save-devscript-loader我安装的版本如下："codemirror":"^5.59.2","jsonlint":"^1.6.3","script-loader":"^0.7.2",2。JsonEditor组件直接封装JsonEditor组件，并在src/components新建JsonEditor.vue文件，直接上传代码如下.json-editor{高度：100%;位置：相对；}.json-editor>>>.CodeMirror{高度：自动；最小高度：250px；}.json-editor>>>.CodeMirror-scroll{最小高度：250px；}.json-editor>>>.cm-s-rubybluespan.cm-string{颜色：#f08047;}其中需要注意的是，代码主题样式可以在官网根据自己的喜好选择，导入对应的css文件即可。我选择的主题是rubyblue。另一个陷阱是编辑器在隐藏和显示时，容易出现风格混乱。解决办法是设置autoRefresh为true，加上刷新功能，每次打开编辑器时刷新编辑器。详情请参考本文https://www.cnblogs.com/wenru...3.使用起来非常方便，直接在需要的地方导入JsonEditor组件，直接添加代码这样就可以愉快的写json代码了，也会提示格式错误。如果输入的json需要提交，可以通过JSON.parse校验，防止提交//...//判断表达式是否满足要求if(this.json){try{JSON.parse(this.json)}catch(e){this.$message.warning('请输入正确的json')return}}//...CodeMirror有非常强大的功能，比如代码自动补全，代码折叠，绑定vim，设置快捷键等功能可以在官网找到。本文仅记录笔者使用过的一些简单功能。