web代码编辑器vue-codemirror的基本使用

发表于 分类于 / Changyan：

前景提要

业务中需要展示代码编辑器，每行代码前面要显示行号

相关库

vue-codemirror 基本使用

我用的 4.0.6 版本, npm 地址如下：

https://www.npmjs.com/package/vue-codemirror/v/4.0.6

里边有基本使用方法，这里不赘述

使用注意点

记得页面中务必加载样式，类似这样:

1
2
3
4
import { codemirror } from 'vue-codemirror'
// 下边第一个必须引入 第二个如果要自定主题 也得引入
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/erlang-dark.css'

配置中可指定 erlang-dark 主题：

1
2
3
4
5
6
option: {
  tabSize: 2,
  mode: 'text/javascript',
  theme: 'erlang-dark',
  ...
}

若不加载样式，一定会出现编辑器渲染出来的代码跟预期不符

另外我在一个页面使用了多个 code-mirror ，且是用 element-ui 的 tabs 组件切换展示的，但会出现切换时 代码不更新的情况，这个时候可以给 code-mirror 组件上添加类似 :key="computedKey" 的属性，在监听 tab 切换时，手动更新 computedKey 值来强制 code-mirror 更新

更多资源