vue集成codemirror代码编辑器

点击上方“ 青年码农 ”关注

回复“特效源码”可获取各种资料

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文件夹，你想要的都在这里

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

3.最终效果