CodeMirror是一个用 JavaScript 为浏览器实现的通用文本编辑器。它专门用于编辑代码，并带有多种语言模式和插件 ，可实现更高级的编辑功能。


本教程是基于vue2实现集成，使用vue-codemirror插件

1. 安装

# npm


npm 

install vue-codemirror -S


# yarn


yarn 

add vue-codemirror -S


2. 新建组件并引入

<template>


&nbsp;&nbsp;

<div>


&nbsp;&nbsp;&nbsp;&nbsp;

<codemirror

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ref="cm"

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;v-model="value"

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:options="options"

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@input="inputChange"

&nbsp;&nbsp;&nbsp;&nbsp;>

</codemirror>


&nbsp;&nbsp;

</div>


</template>



<script>


//&nbsp;全局引入vue-codemirror

import&nbsp;{&nbsp;codemirror&nbsp;}&nbsp;from&nbsp;"vue-codemirror";

//&nbsp;引入css文件

import&nbsp;"codemirror/lib/codemirror.css";

//&nbsp;引入主题&nbsp;可多个

import&nbsp;"codemirror/theme/ayu-mirage.css";

//&nbsp;引入语言模式&nbsp;可多个

import&nbsp;"codemirror/mode/sql/sql.js";

export&nbsp;default&nbsp;{

&nbsp;&nbsp;name:&nbsp;"codemirror",

&nbsp;&nbsp;components:&nbsp;{&nbsp;codemirror&nbsp;},

&nbsp;&nbsp;props:&nbsp;{

&nbsp;&nbsp;&nbsp;&nbsp;value:&nbsp;{

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default:&nbsp;""

&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;},

&nbsp;&nbsp;data()&nbsp;{

&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;options:&nbsp;{

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;语言及语法模式

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mode:&nbsp;"text/x-sql",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;主题

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;theme:&nbsp;"ayu-mirage",

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;显示函数

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;line:&nbsp;true,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lineNumbers:&nbsp;true,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;软换行

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lineWrapping:&nbsp;true,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;tab宽度

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tabSize:&nbsp;4

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;};

&nbsp;&nbsp;},

&nbsp;&nbsp;methods:&nbsp;{

&nbsp;&nbsp;&nbsp;&nbsp;inputChange(content)&nbsp;{

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.$nextTick(()&nbsp;=>&nbsp;{

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log("content:"&nbsp;+&nbsp;content);

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});

&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;}

};

</script>


主题引入多个，我们可以实现动态切换主题，语言模式支持多种语言。

options支持的属性很多，上面的例子只使用了几个常用的属性，更多属性请参照官方文档

​​https://codemirror.net/doc/manual.html#config​​


关于如何切换主题和语言模式，通过npm安装的vue-codemirror插件，可以在node_modules中找到codemirror文件夹，你想要的都在这里

vue集成codemirror代码编辑器_文本编辑器

只需要引入对应的文件，在options中切换即可。

3.最终效果

vue集成codemirror代码编辑器_css_02