在 Vue 中集成代码编辑器

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 18 天，点击查看活动详情

代码编辑器也是前端会遇到的一种场景，除了要满足编辑和展示代码的功能，还会有一些样式的要求。

在 Vue 项目中可以使用 vue-codemirror 来集成代码编辑器。关于 CodeMirror 的具体细节也可参照官方：CodeMirror。

在 Vue2 和 Vue3 中，代码编辑器使用的方式不同，注意按照项目使用的版本来进行相应的引入。

yarn add codemirror-editor-vue3 -S  // 或使用 npm install

引入相关文件：

import Codemirror from 'codemirror-editor-vue3';
// 编辑器代码格式
import 'codemirror/mode/javascript/javascript.js';
// 自动刷新
import 'codemirror/addon/display/autorefresh';
// 主题
import 'codemirror/theme/dracula.css';

使用：

<codemirror v-model:value="code" :options="options"/>

1. code：就是需要显示在代码编辑器中的内容
2. options 属性：
   • autorefresh: true, // 是否自动刷新
   • smartIndent: true, // 自动缩进
   • tabSize: 4, // 缩进单元格为 4 个空格
   • mode: 'application/json', //编辑器的编程语言，比如：'javascript'
   • theme: 'dracula', // 主题，使用主体需要引入相应的 css 文件
   • line: true, // 是否显示行数
   • viewportMargin: Infinity, // 高度自适应
   • highlightDifferences: true,
   • autofocus: false,
   • indentUnit: 2,
   • readOnly: true, // 只读
   • showCursorWhenSelecting: true,
   • firstLineNumber: 1,
   • matchBrackets: true,//括号匹配

主题色

其中，theme 属性如果为空值，显示默认主题，也就是 白色的：

更换主题后，运行效果如下：

在插件的 theme 文件中可以看到很多主题，还可以引入掘金的主题。

代码格式

编辑器的代码格式也是需要进行引入的，比如 JSON 格式、js 等等。

复制到剪贴板

使用代码编辑器的时候，往往还会搭配一个复制功能，也可以利用代码编辑器做代码的导入。下面来实现一个复制功能。 clipboard 是一个非常轻量的复制到剪贴板插件，安装 Vue3 版本的 vue-clipboard3：

npm install vue-clipboard3 --save

引入及使用：

import useClipboard from 'vue-clipboard3'

copyHandle() {
  const { toClipboard } = useClipboard()
  this.copy = async () => {
    try {
      await toClipboard('需要复制的数据')
      console.log('复制成功')
    } catch (e) {
      console.error(e)
    }
  }
}