转前端(一):代码编辑器中的选择

作为转前端的第一篇博文，转前端并不是转发前端的文档。而是记录我从测试在转去做前端的一个小小技术感情博文系列，而我认为我踏上这条路，一路的新鲜事务、挑战、荆棘还有很多。我希望这个博文可以为更多人服务，将来也能看到自己过去的思路是如何转变的。

小小的介绍过后，进入主题

框架：Vue+ElementIDE：vscode

昨天遇到一个问题，需求过来的图是需要应用到代码编辑器，顾名思义，就是类似于富文本编辑器一样，编辑器中可识别代码格式高亮、根据设置的文本类型设置不同的格式等等。

初步设想：百度一查，应有尽有。于是百度后，选择引用CodeMirror ，并根据网上的教程一步一步走(亲测可用，但不适用于我的项目)

1、cnpm下载codemirror

cnpm install --save codemirror

 2、配置textarea

<textarea ref="jsonCode" v-model="json_code"></textarea>

3、import相关

import "codemirror/theme/ambiance.css"; import "codemirror/lib/codemirror.css"; import "codemirror/addon/hint/show-hint.css"; require("codemirror/addon/edit/matchbrackets"); let CodeMirror = require("codemirror/lib/codemirror");

4、配置相关配置

let editor = CodeMirror.fromTextArea(this.$refs.jsonCode, { mode: "javascript", indentWithTabs: true, smartIndent: true, lineNumbers: true, matchBrackets: true })

 简单的复制粘贴后，页面呈现了与百度上一样的编辑器。接下在纠结在于如何使这代码编辑器的高度与上级的div块适应，毕竟它现在呈现出来的height只有固定的300。后来在main.js中更改了全局修改了高度。

.CodeMirror { height: 95vh !important; }

此时我解决了高度问题。于此同时我发现了一个问题。那就是CodeMirror这个插件，在配合el-tabs十分不友好，在切换tab后，CodeMirror的框体不显示，需要鼠标点击一下才能解决。于是我花了大量时间查询百度发现，有一些人说这个解决起来比较麻烦，而有一部分人说使用reset()方法，还有一部分人说官方有一个方法可行，但是对性能会有影响。

可能是我使用reset()方法不对，我这边丝毫在与tab配合上十分不友好。于是我转向另一个插件vue-codemirror。虽然我不太清楚这俩有啥关系，感觉是一家的插件。但是install后发现版本还是有点大的，感觉可能在配合tabs上会有所优化。但是，失望了，还是不行。

反复调整vue-codemirror后，我似乎忘记了我应该继续去百度查询。一个劲儿的琢磨vue-codemirror插件(可能是我太菜了，一搞半天没有进展没有思路)。

5点左右，我想想不行求助一下别人吧。于是在csdn论坛上发了一帖，希望网友能推荐几个前端的代码编辑器。

11点左右，回家看了一眼电脑，有人回复了论坛，推荐了几个插件。其中有一个试用了，可以适用于我的场景。接下来开始进行简单的配置：

1、安装

cnpm install --save-dev vue2-ace-editor

2、在需要的页面引入

editor:require('vue2-ace-editor')

3、编写editor相关代码

<editor v-model="jsonCode" height="90vh" width="90%" :content="jsonCode" ref="editor" @init="editorInit" lang="json" theme="tomorrow_night" :option="{ enableBasicAutocompletion: true, enableSnippets: true, enableLiveAutocompletion: true, tabSize:2, fontSize:20, showPrintMargin:false, }" ></editor>

4、设置init

editorInit(){ require("brace/ext/language_tools"); require("brace/mode/java"); require("brace/mode/json"); require("brace/snippets/java"); require("brace/theme/eclipse"); require("brace/theme/xcode") },

后同理在tabs另一边配置一通，测试下，可以用。

 

注：本人小白端，如有什么不对的地方还望指正！