Vue2 安装使用代码编辑器 vue-codemirror
1. 安装 vue-codemirror
// 指定安装4.x版本
// 目前最新版本6.x,仅支持Vue3.0
npm i vue-codemirror@4.x --save
2. 安装 codemirror
// 同样指定版本
// codemirror 需要与 vue-codemirror 同时安装
npm i codemirror@5.x --save
3. 使用 codemirror
注意:codemirror 需要的主题样式、语言默认、需要引入后配置才能生效
// cm-setting.js
// 组件样式
import "codemirror/lib/codemirror.css";
// 主题
import "codemirror/theme/3024-day.css"; // 引入主题样式,根据设置的theme的主题引入
import "codemirror/theme/ayu-mirage.css";
import "codemirror/theme/monokai.css";
import 'codemirror/theme/rubyblue.css'
// html代码高亮
import "codemirror/mode/htmlmixed/htmlmixed.js";
// 语言模式
import 'codemirror/mode/javascript/javascript.js'
全局引入
// main.js
import Vue from "vue";
import App from "./App";
// 引入
import { codemirror } from "vue-codemirror";
// 引入配置对应的文件(样式、主题、代码格式等)
import "@/utils/cm-setting.js";
// 注册使用
Vue.component("codemirror", codemirror);
.....
局部 (按需) 引入
<!-- 组件 -->
<template>
<div class="content">
<codemirror v-model="code" :options="options"></codemirror>
</div>
</template>
<script>
// 文件内引入
import { codemirror } from "vue-codemirror";
// 引入样式、主题、代码风格等配置或样式文件
import "@/utils/cm-setting.js";
export default {
// 注册使用
components: {
codemirror,
},
data() {
return {
code: "",
options: {
line: true,
theme: "rubyblue", // 主题
tabSize: 4, // 制表符的宽度
indentUnit: 2, // 一个块应该缩进多少个空格(无论这在编辑语言中意味着什么)。默认值为 2。
firstLineNumber: 1, // 从哪个数字开始计算行数。默认值为 1。
readOnly: false, // 只读
autorefresh: true,
smartIndent: true, // 上下文缩进
lineNumbers: true, // 是否显示行号
styleActiveLine: true, // 高亮选中行
viewportMargin: Infinity, //处理高度自适应时搭配使用
showCursorWhenSelecting: true, // 当选择处于活动状态时是否应绘制游标
mode: "javascript",
},
};
},
};
</script>
4. 配置相关
参考 配置相关文档
总结
有问题欢迎留言,如果我还记怎么写~