vue-codemirror使用详细过程（包括修改宽度，更换语言模式，C++模式，HTML模式，括号补全）

近期在做一个oj项目，要使用代码编辑器，过程中碰到一些问题，现在记录下步骤。

参考文章：vue-codemirror 最全踩坑之路_VITAMIN的博客-CSDN博客

大致效果：

 1.安装，直接在你的vue项目中使用npm指令

npm install vue-codemirror --save

 2.引入和参数配置，这里直接参考vue-codemirror 最全踩坑之路_VITAMIN的博客-CSDN博客

（先都按照参考文章中配置，暂时不管其含义） 

   注意，新建的setting.js文件位置，以及在组件中引入他的位置要换成自己的

3.如果要更换主题

 在上一步引入的setting.js文件底部可以看到，我们现有的能够更换的主题只有这两个

此时，我们可以去官方的不同主题展示页选择你想要的主题

vue-codemirror | Homepage | Surmon's projects

可以看到，我最终选择的主题就是cobalt

我们需要在setting.js主题文件处引入

import 'codemirror/theme/cobalt.css'

引入后，更改配置参数中的主题：（改成我们选择的cobalt主题）

 4.调整编辑器宽度

此时，效果已经能看到了，但是宽度不是很合适

 我们在官方的用户手册可以找到方法代码镜：用户手册 (codemirror.net)

该页面是英文的，我们先将其翻译成中文

 点击配置，此时我们就能理解之前配置的各项参数和含义，也可以根据需求进行更改

 当然，这里我们重点是要看外观，点击定制造型

 我们要修改的就是CodeMirror这个类，宽度设置成你想要的值

<style>
  .CodeMirror{
    width: 900px !important;
  }
</style>

 此时，我们在其中写点代码看看

 5.编辑器语言的选择

我们之前参考的文章是引入了javascript，我们这时需要其他的语言模式：

还是在官方查找：CodeMirror: Language Modes

在右边的模式中选择你想要的语言模式 ：现在举几个例子

1.C++模式：

 进去第一行可以看到我们要引入的模式名的clike,在我们vue项目的node_modules文件夹的codemirror中mode文件夹里可以看到所有的模式，我们可以找到clike

引入他，还是在setting.js中(如果已经引入，就不需要重复引入了，这里为了理解过程完整）

import 'codemirror/mode/clike/clike.js'

然后，我们去找刚刚页面最低端的MIME

 于是，就可以修改配置参数中模式为对应的：

mode: 'text/x-c++src'

写一些c++代码试试：

 2.html模式：

点进去之后， 拉到最底下

因此，我们要除了要引入htmlmixed，之前还需引入xml：在setting.js文件中写就行，(如果已经引入，就不需要重复引入了，这里为了理解过程完整））

import 'codemirror/mode/xml/xml.js'
import 'codemirror/mode/htmlmixed/htmlmixed.js'

mode:"text/html"

保存后，在编辑器中写一些html代码试试

最后，如果要根据选择的语言，更换模式，先将每一种可选择的语言模式的文件都引入完成，之后，根据选择的选项，动态更换mode就能实现

6.代码括号自动补全

还是在setting.js中引入

import 'codemirror/addon/edit/closebrackets.js'

 然后配置参数：

autoCloseBrackets:true, //自动补全括号

 7.代码只读

 配置参数，将readOnly赋值如下 （此时编辑器无法获得焦点）

readOnly:'nocursor'

这样就将编辑器看做代码展示的一个容器，只读，无法编辑

更多配置参数参考：codeMirror配置 - ccorz - 博客园 (cnblogs.com)