在 Vue 中集成代码编辑器

您所在的位置：网站首页 › vuesql编辑器 › 在 Vue 中集成代码编辑器

在 Vue 中集成代码编辑器

2023-09-16 02:09| 来源: 网络整理| 查看: 265

开启掘金成长之旅！这是我参与「掘金日新计划 · 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';

使用：

code：就是需要显示在代码编辑器中的内容 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) } } }

【本文地址】

在 Vue 中集成代码编辑器

在 Vue 中集成代码编辑器

今日新闻

推荐新闻