<span style="font-size:14px; text-align:center;">点击上方“</span><span style="font-size:14px;font-weight:bolder">青年码农</span><span style="font-size:14px">”关注</span><p><span style="font-size:14px">回复“</span><span style="font-size:14px;font-weight:bolder">特效源码</span><span style="font-size:14px">”可获取各种资料</span></p><blockquote><p>CodeMirror是一个用 JavaScript 为浏览器实现的通用文本编辑器。它专门用于编辑代码，并带有多种语言模式和插件 ，可实现更高级的编辑功能。</p></blockquote><p><span style="font-size:15px">本教程是基于vue2实现集成</span><span style="font-size:15px">，使用vue-codemirror插件</span><span/></p><p><strong><span style="font-size:16px">1. 安装
</span></strong></p><span style="font-size:inherit"># npm</span>
npm <span style="font-size:inherit">install</span> vue-codemirror -S
<span style="font-size:inherit"># yarn</span>
yarn <span style="font-size:inherit">add</span> vue-codemirror -S
<p><strong><span style="font-size:16px">2. 新建组件并引入</span></strong></p><span style="font-size:inherit"><<span style="font-size:inherit">template</span>></span>
<span style="font-size:inherit"><<span style="font-size:inherit">div</span>></span>
<span style="font-size:inherit"><<span style="font-size:inherit">codemirror</span>
<span style="font-size:inherit">ref</span>=<span style="font-size:inherit">"cm"</span>
<span style="font-size:inherit">v-model</span>=<span style="font-size:inherit">"value"</span>
<span style="font-size:inherit">:options</span>=<span style="font-size:inherit">"options"</span>
@<span style="font-size:inherit">input</span>=<span style="font-size:inherit">"inputChange"</span>
></span><span style="font-size:inherit"></<span style="font-size:inherit">codemirror</span>></span>
<span style="font-size:inherit"></<span style="font-size:inherit">div</span>></span>
<span style="font-size:inherit"></<span style="font-size:inherit">template</span>></span>

<span style="font-size:inherit"><<span style="font-size:inherit">script</span>></span><span style="font-size:inherit">
<span style="font-size:inherit">// 全局引入vue-codemirror</span>
<span style="font-size:inherit">import</span> { codemirror } <span style="font-size:inherit">from</span> <span style="font-size:inherit">"vue-codemirror"</span>;
<span style="font-size:inherit">// 引入css文件</span>
<span style="font-size:inherit">import</span> <span style="font-size:inherit">"codemirror/lib/codemirror.css"</span>;
<span style="font-size:inherit">// 引入主题 可多个</span>
<span style="font-size:inherit">import</span> <span style="font-size:inherit">"codemirror/theme/ayu-mirage.css"</span>;
<span style="font-size:inherit">// 引入语言模式 可多个</span>
<span style="font-size:inherit">import</span> <span style="font-size:inherit">"codemirror/mode/sql/sql.js"</span>;
<span style="font-size:inherit">export</span> <span style="font-size:inherit">default</span> {
<span style="font-size:inherit">name</span>: <span style="font-size:inherit">"codemirror"</span>,
<span style="font-size:inherit">components</span>: { codemirror },
<span style="font-size:inherit">props</span>: {
<span style="font-size:inherit">value</span>: {
<span style="font-size:inherit">default</span>: <span style="font-size:inherit">""</span>
}
},
data() {
<span style="font-size:inherit">return</span> {
<span style="font-size:inherit">options</span>: {
<span style="font-size:inherit">// 语言及语法模式</span>
mode: <span style="font-size:inherit">"text/x-sql"</span>,
<span style="font-size:inherit">// 主题</span>
theme: <span style="font-size:inherit">"ayu-mirage"</span>,
<span style="font-size:inherit">// 显示函数</span>
line: <span style="font-size:inherit">true</span>,
<span style="font-size:inherit">lineNumbers</span>: <span style="font-size:inherit">true</span>,
<span style="font-size:inherit">// 软换行</span>
lineWrapping: <span style="font-size:inherit">true</span>,
<span style="font-size:inherit">// tab宽度</span>
tabSize: <span style="font-size:inherit">4</span>
}
};
},
<span style="font-size:inherit">methods</span>: {
inputChange(content) {
<span style="font-size:inherit">this</span>.$nextTick(<span style="font-size:inherit"><span style="font-size:inherit">()</span> =></span> {
<span style="font-size:inherit">console</span>.log(<span style="font-size:inherit">"content:"</span> + content);
});
}
}
};
</span><span style="font-size:inherit"></<span style="font-size:inherit">script</span>></span>
<p><span style="font-size:15px">主题引入多个，我们可以实现动态切换主题，<span style="font-size:15px">语言模式支持多种语言。</span></span></p><p><span style="font-size:15px">options支持的属性很多，上面的例子只使用了几个常用的属性，更多属性请参照官方文档</span></p><blockquote><p>https://codemirror.net/doc/manual.html#config</p></blockquote><p><span style="font-size:15px">关于如何切换主题和语言模式，通过npm安装的<span style="font-size:15px">vue-codem</span><span style="font-size:15px">irror插件，可以在node_modules中找到codemirror文件夹，你想要的都在这里</span></span></p><p><span style="font-size:15px"><span style="font-size:15px"/></span></p><div class="image-package"><img src="https://upload-images.jianshu.io/upload_images/8877503-64e2aac2d9bb994b.jpeg" img-data="{"format":"jpeg","size":32469,"height":600,"width":1046}" class="uploaded-img" style="min-height:200px;min-width:200px;" width="auto" height="auto"/>
</div><p><span style="font-size:15px">只需要引入对应的文件，在options中切换即可。</span></p><p><strong><span style="font-size:16px">3.最终效果</span></strong>
</p><div class="image-package"><img src="https://upload-images.jianshu.io/upload_images/8877503-a292420003c5b4fd.jpeg" img-data="{"format":"jpeg","size":18775,"height":586,"width":1044}" class="uploaded-img" style="min-height:200px;min-width:200px;" width="auto" height="auto"/>
</div><p><span style="font-size:15px"/>
</p>