vue3项目中使用CodeMirror组件的详细教程，中文帮助文档，使用手册

简介

这是基于 Vue 3 开发的 CodeMirror 组件。该组件基于 CodeMirror 5 开发，仅支持 Vue 3。

除了支持官方提供的各种语法模式外，还额外添加了日志输出展示模式，开箱即用，但不一定适用于所有场景。

如需完整文档和更多使用案例，请查阅 codemirror-editor-vue3 的官方文档。

安装

npm install codemirror-editor-vue3 codemirror@^5 -Syarn add codemirror-editor-vue3 codemirror@">=5.64.0 <6"pnpm i codemirror-editor-vue3 codemirror@^5 -S

如果你的项目需要支持 TypeScript，则还需要安装 @types/codemirror 依赖。

npm install @types/codemirror -D

注册全局组件

不推荐全局注册组件，这会导致模板中的类型提示无法正确获取。
main.js:

import { createApp } from "vue";
import App from "./App.vue";
import { InstallCodeMirror } from "codemirror-editor-vue3";const app = createApp(App);
app.use(InstallCodeMirror);
app.mount("#app");

全局注册的组件名称是Codemirror，或者您可以自定义组件名称，例如：

app.use(InstallCodeMirror, { componentName: "customName" });

在组件中使用

<template><Codemirrorv-model:value="code":options="cmOptions"borderplaceholder="test placeholder":height="200"@change="change"/>
</template><script>
import Codemirror from "codemirror-editor-vue3";// placeholder
import "codemirror/addon/display/placeholder.js";// language
import "codemirror/mode/javascript/javascript.js";
// placeholder
import "codemirror/addon/display/placeholder.js";
// theme
import "codemirror/theme/dracula.css";import { ref } from "vue";
export default {components: { Codemirror },setup() {const code = ref(`
var i = 0;
for (; i < 9; i++) {console.log(i);// more statements
}`);return {code,cmOptions: {mode: "text/javascript", // Language modetheme: "dracula", // Theme},};},
};
</script>

语法高亮

常用语法

  • javascript
  • json
  • css
  • html
  • apl
  • yaml
    更多的案例正在逐渐增加，您也可以参考文档来实现更多的语言模式。

自定义语法高亮

自定义语法文件custom-js-mode

import { javascript } from "codemirror/mode/javascript/javascript";export function defineCustomMode(CodeMirror) {CodeMirror.defineMode("custom-javascript", function(config, parserConfig) {const jsMode = CodeMirror.getMode(config, "text/javascript");return {startState: function() {return {jsState: jsMode.startState(),};},token: function(stream, state) {if (stream.match(/^$([^$]*)\]/)) {return "bracket-content";}if (stream.match(/^[A-Za-z_][A-Za-z0-9_]*(?=\s*$|\s*[({=;])/)) {return "english-word";}return jsMode.token(stream, state.jsState);},indent: jsMode.indent,electricInput: jsMode.electricInput,fold: jsMode.fold,closeBrackets: jsMode.closeBrackets,};});
}

在组件中使用自定义语法模式

<template><Codemirrorv-model:value="code":options="cmOptions"borderplaceholder="test placeholder":height="200"@change="change"/>
</template><script>
import Codemirror from "codemirror-editor-vue3";// placeholder
import "codemirror/addon/display/placeholder.js";// language
import "codemirror/mode/javascript/javascript.js";
// placeholder
import "codemirror/addon/display/placeholder.js";
// theme
// import "codemirror/theme/dracula.css";
import "codemirror/theme/dracula.css";// 引入自定义模式
import { defineCustomMode } from "./custom-js-mode"; // 替换为你实际路径// 注册自定义模式
defineCustomMode(window.CodeMirror);import { ref } from "vue";
export default {components: { Codemirror },setup() {const code = ref(`[一级渠道]ROW_MAX()`);return {code,cmOptions: {// mode: "log", // Language mode// theme: "default", // Theme// mode: "text/javascript", // Language mode// theme: "dracula", // Thememode: "custom-javascript", // Language modetheme: "dracula", // Theme},};},
};
</script>
<style>/* 在 style 部分添加以下样式 */
.cm-s-dracula span.cm-variable {color: rgba(141,213,121,0.8) !important;
}.cm-s-dracula span.cm-english-word {color: rgba(216,78,224,0.8) !important;
}
</style>

配置项

namedescriptiontypedefault
value(v-model)Editor contentstring“”
optionsConfiguration options of codemirror5EditorConfigurationDEFAULT_OPTIONS
placeholderEditor placeholder content to introduce codemirror related filesstring“”
borderWhether to display editor bordersbooleanfalse
widthWidthstring100%
heightHeightstring100%
original-styleUsing the original style, disable the second modification of the style for this component (but does not affect width, height, and border)booleanfalse
KeepCursorInEndAlways keep the mouse position on the last linebooleanfalse
mergeMerge mode, can also be used as diff patternbooleanfalse

事件

定义组件事件

下面三个仅仅是这个组件封装的事件。请参考更多事件代码镜像事件

event namedescriptionparams
changevalue or instance changes(value: string, cm: Editor) => void
inputinput(value: string) => void
readyThe Codemirror component is mounted(cm: Editor) => void

Codemirror事件

以下事件是codemiror5的官方事件。您可以使用该组件直接通过组件绑定事件，例如：

<Codemirrorv-model:value="code":options="{ mode: 'text/x-vue', theme: 'default' }"borderplaceholder="test-placeholder":height="200"@change="onChange"@blur="onBlur"@focus="onFocus"@scroll="onScroll"
/>

全部事件

CodeMirror 提供了丰富的事件系统，使得开发者可以监听编辑器中的各种行为，并在这些行为发生时执行自定义的逻辑。以下是每个事件的简要说明和使用案例：

1. changes

  • 描述：当文档内容发生变化时触发。
  • 参数：
    • instance：当前 CodeMirror 实例。
    • changeObj：包含变化信息的对象。
editor.on('changes', function(instance, changeObj) {console.log("Changes detected:", changeObj);
});

2. scroll

  • 描述：当滚动条位置改变时触发。
  • 参数：instance 当前 CodeMirror 实例。
editor.on('scroll', function(instance) {console.log("Scroll position changed");
});

3. beforeChange

  • 描述：在文档变更之前触发，允许阻止变更。
  • 参数：
    • instance：当前 CodeMirror 实例。
    • changeObj：变更对象，可修改以影响变更。
editor.on('beforeChange', function(instance, changeObj) {console.log("Before change", changeObj.from, changeObj.to, changeObj.text);
});

4. cursorActivity

  • 描述：光标或选区变化时触发。
  • 参数：instance 当前 CodeMirror 实例。
editor.on('cursorActivity', function(instance) {console.log("Cursor or selection changed");
});

5. keyHandled

  • 描述：当一个键被处理后触发。
  • 参数：
    • instance：当前 CodeMirror 实例。
    • name：按键名称。
    • event：原生键盘事件。
editor.on('keyHandled', function(instance, name, event) {console.log("Key handled:", name);
});

6. inputRead

  • 描述：每当从输入中读取到字符时触发。
  • 参数：
    • instance：当前 CodeMirror 实例。
    • changeObj：包含变更信息的对象。
editor.on('inputRead', function(instance, changeObj) {console.log("Input read:", changeObj.text.join(""));
});

7. electricInput

  • 描述：当点击输入（如自动缩进）发生时触发。
  • 参数：instance 当前 CodeMirror 实例。
editor.on('electricInput', function(instance, line) {console.log("Electric input on line:", line);
});

8. beforeSelectionChange

  • 描述：在选择变化前触发，允许修改选择范围。
  • 参数：
    • instance：当前 CodeMirror 实例。
    • obj：包含旧的新的选择信息。
editor.on('beforeSelectionChange', function(instance, obj) {console.log("Before selection change:", obj.ranges);
});

9. viewportChange

  • 描述：当视口变化时触发（比如滚动导致可见行变化）。
  • 参数：
    • instance：当前 CodeMirror 实例。
    • from：新的起始行号。
    • to：新的结束行号。
editor.on('viewportChange', function(instance, from, to) {console.log("Viewport changed from", from, "to", to);
});

10. swapDoc

  • 描述：当文档被替换时触发。
  • 参数：instance 当前 CodeMirror 实例。
editor.on('swapDoc', function(instance) {console.log("Document swapped");
});

11. gutterClick

  • 描述：当点击行号区域时触发。
  • 参数：
    • instance：当前 CodeMirror 实例。
    • line：点击的行号。
    • gutter：被点击的边栏类型。
    • clickEvent：鼠标事件。
editor.on('gutterClick', function(instance, line, gutter, clickEvent) {console.log("Gutter clicked at line:", line);
});

12. gutterContextMenu

  • 描述：当右键点击行号区域时触发。
  • 参数：
    • instance：当前 CodeMirror 实例。
    • line：右键点击的行号。
    • gutter：被点击的边栏类型。
    • contextMenuEvent：鼠标事件。
editor.on('gutterContextMenu', function(instance, line, gutter, contextMenuEvent) {console.log("Gutter context menu opened at line:", line);
});

13. focus

  • 描述：当编辑器获得焦点时触发。
  • 参数：instance 当前 CodeMirror 实例。
editor.on('focus', function(instance) {console.log("Editor focused");
});

14. blur

  • 描述：当编辑器失去焦点时触发。
  • 参数：instance 当前 CodeMirror 实例。
editor.on('blur', function(instance) {console.log("Editor blurred");
});

15. refresh

  • 描述：当编辑器刷新（重新计算布局）时触发。
  • 参数：instance 当前 CodeMirror 实例。
editor.on('refresh', function(instance) {console.log("Editor refreshed");
});

16. optionChange

  • 描述：当选项更改时触发。
  • 参数：
    • instance：当前 CodeMirror 实例。
    • option：更改的选项名。
editor.on('optionChange', function(instance, option) {console.log("Option changed:", option);
});

17. scrollCursorIntoView

  • 描述：当尝试将光标滚动到视图中时触发。
  • 参数：
    • instance：当前 CodeMirror 实例。
    • event：事件对象。
editor.on('scrollCursorIntoView', function(instance, event) {console.log("Scrolling cursor into view");
});

18. update

  • 描述：当编辑器更新时触发（包括任何可能需要重新绘制的内容变化）。
  • 参数：instance 当前 CodeMirror 实例。
editor.on('update', function(instance) {console.log("Editor updated");
});

常用方法

CodeMirror 提供了丰富的 API 方法，允许开发者与编辑器进行交互、查询和修改其状态。以下是一些常用的 CodeMirror 方法及其简要说明：

基本方法

  1. getValue()

    • 获取当前文档的全部内容。
    var content = editor.getValue();

  2. setValue(content)

    • 设置整个文档的内容。
    editor.setValue("新的内容");

  3. replaceSelection(replacement, collapse)

    • 替换当前选中的文本或在光标位置插入文本。
    editor.replaceSelection("插入的文本", "end"); // 在光标后插入文本

  4. focus()

    • 让编辑器获得焦点。
    editor.focus();

  5. setOption(option, value)

    • 动态设置选项。
    editor.setOption("readOnly", true);

  6. getOption(option)

    • 获取当前选项的值。
    var readOnly = editor.getOption("readOnly");

光标和选择

  1. getCursor(startOrEnd)

    • 获取主光标的位置。可以指定获取开始（"start"）或结束（"end"）位置，默认为主光标位置。
    var cursor = editor.getCursor(); // 获取主光标位置

  2. setCursor(line, ch, options)

    • 设置光标位置到特定行和列（从0开始计数）。
    editor.setCursor(2, 5); // 移动光标到第3行第6个字符

  3. somethingSelected()

    • 检查是否有文本被选中。
    if (editor.somethingSelected()) {console.log("有文本被选中");
}

文档操作

  1. lineCount()

    • 返回文档总行数。
    var lines = editor.lineCount();

  2. getLine(n)

    • 获取特定行的文本内容。
    var lineContent = editor.getLine(0); // 获取第一行的内容

  3. markText(from, to, className)

    • 标记一段文本，并可为其应用样式。
    var marker = editor.markText({line: 1, ch: 0}, {line: 1, ch: 5}, {className: "styled-background"});

滚动和视图控制

  1. scrollIntoView(pos, margin)

    • 将指定位置滚动到视图中，可选地添加一个额外的边距。
    editor.scrollIntoView({line: 10, ch: 0}, 10); // 滚动到第11行并留出10px边距

  2. refresh()

    • 刷新编辑器视图，通常在DOM元素大小改变后调用。
    editor.refresh();

高级功能

  1. addKeyMap(map, bottom)

    • 添加自定义快捷键映射。
    editor.addKeyMap({"Ctrl-Space": completeFromHint()});

  2. on(event, handler)

    • 注册事件监听器。
    editor.on('change', function(instance, changeObj) {console.log("文档发生了变化:", changeObj);
});

这些只是CodeMirror提供的部分API方法，更多高级功能如搜索、替换、注释等也都有相应的API支持。具体使用时可以根据项目需求查阅官方文档以获得更详细的说明和示例代码。由于CodeMirror版本更新可能会带来API的变化，请确保参考的是适用于您所使用的CodeMirror版本的文档。

参考文档

https://github.com/rennzhang/codemirror-editor-vue3

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/79913.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

LeetCode热题100--240.搜索二维矩阵--中等

LeetCode热题100--240.搜索二维矩阵--中等

1. 题目 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性&#xff1a; 每行的元素从左到右升序排列。 每列的元素从上到下升序排列。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,4,7,11,15],[2,5,8,12,19],[3,6,9,16,22],[1…
阅读更多...
2025爬虫实战技巧：高效数据采集方案

2025爬虫实战技巧：高效数据采集方案

2025爬虫实战技巧：高效数据采集方案 🔥 本文核心价值 HTTPS请求链路加密逆向解析动态Cookie生成机制破解Cloudflare等高级防护绕过方案分布式爬虫架构设计要点目录 2025爬虫实战技巧：高效数据采集方案🔥 本文核心价值一、现代反爬机制技术解析1.1 主流平台防护体系1.2 反…
阅读更多...
绑定 SSH key（macos）

绑定 SSH key（macos）

在 macOS 上绑定 Gitee 或 GitHub 的 SSH Key&#xff0c;通常分为以下几步操作&#xff0c;包括生成 SSH key、添加到 ssh-agent&#xff0c;并配置到 Gitee 或 GitHub 平台。 1. 检查是否已有 SSH Key ls -al ~/.ssh 看看是否已有 id_rsa 或 id_ed25519 等文件。如果没有就…
阅读更多...
Tailwind CSS v4 主题化实践入门（自定义 Theme + 主题模式切换）✨

Tailwind CSS v4 主题化实践入门（自定义 Theme + 主题模式切换）✨

ok&#xff0c;经过学习Tailwindcss我决定将此专栏建设成为一个Tailwindcss实战专栏&#xff0c;我将在专栏内完成5050挑战&#xff1a;50天50个Tailwindcss练习项目&#xff0c;欢迎大家订阅&#xff01;&#xff01;&#xff01; Tailwind CSS v4 带来了更强大的主题定制能力…
阅读更多...
SAF利用由Varjo和AFormX开发的VR/XR模拟器推动作战训练

SAF利用由Varjo和AFormX开发的VR/XR模拟器推动作战训练

通过将AFormX的先进军用飞行模拟器与Varjo的行业领先的VR/XR硬件相结合&#xff0c;斯洛文尼亚武装部队正以经济高效、沉浸式的训练方式培训战斗机飞行员&#xff0c;以提高其战术准备和作战效率。 挑战&#xff1a;获得战术军事航空训练的机会有限 军事航空训练长期以来一直…
阅读更多...
VUE中通过DOM导出PDF

VUE中通过DOM导出PDF

最终效果 前端导出PDF的核心在于样式的绘制上&#xff0c;这里其实直接使用CSS进行绘制和布局就行&#xff0c;只不过需要计算好每页DIV盒子的大小&#xff0c;防止一页放不下造成样式错乱。 项目依赖 项目是Vue3 TS npm i html2canvas1.4.1 npm i jspdf3.0.1工具类(htmlToPdf…
阅读更多...
SpringAI框架中的RAG模块详解及应用示例

SpringAI框架中的RAG模块详解及应用示例

SpringAI框架中的RAG模块详解及应用示例 RAG&#xff08;Retrieval-Augmented Generation&#xff09;可以通过检索知识库&#xff0c;克服大模型训练完成后参数冻结的局限性&#xff0c;携带知识让大模型根据知识进行回答。SpringAI框架提供了模块化的API来支持RAG&#xff0…
阅读更多...
MySQL-数据查询（测试）-05-（12-1）

MySQL-数据查询（测试）-05-（12-1）

1-数据准备&#xff1a; CREATE TABLE 员工信息表 (员工编号 VARCHAR(10) PRIMARY KEY,姓名 VARCHAR(20),学历 VARCHAR(20),出生日期 DATE,性别 INT,工作年限 INT,地址 VARCHAR(100),电话号码 VARCHAR(20),员工部门号 INT ); INSERT INTO 员工信息表 (员工编号, 姓名, 学历, 出…
阅读更多...
5G网络：能源管理的“智能电网“革命，Python如何成为关键推手？

5G网络：能源管理的“智能电网“革命，Python如何成为关键推手？

5G网络：能源管理的"智能电网"革命，Python如何成为关键推手？ 大家好，我是Echo_Wish。今天咱们聊一个既硬核又接地气的话题——5G网络如何用Python代码重构全球能源管理。 不知道你们有没有注意过： • 家里装了智能电表后，电费突然变"聪明"了，谷时充…
阅读更多...
AI背景下，如何重构你的产品？

AI背景下，如何重构你的产品？

当AI敲门时&#xff0c;你的产品准备好开门了吗&#xff1f; 最近和做产品的老张聊天&#xff0c;他愁眉苦脸地说&#xff1a;"现在AI这么火&#xff0c;我们的产品就像个老古董&#xff0c;用户都跑隔壁用AI产品去了。“这话让我想起三年前另一个朋友&#xff0c;当时区…
阅读更多...
互联网大厂Java面试实战：从Spring Boot到微服务的技术问答与解析

互联网大厂Java面试实战：从Spring Boot到微服务的技术问答与解析

&#x1f4aa;&#x1f3fb; 1. Python基础专栏&#xff0c;基础知识一网打尽&#xff0c;9.9元买不了吃亏&#xff0c;买不了上当。 Python从入门到精通 &#x1f601; 2. 毕业设计专栏&#xff0c;毕业季咱们不慌忙&#xff0c;几百款毕业设计等你选。 ❤️ 3. Python爬虫专栏…
阅读更多...
Apollo学习——aem问题

Apollo学习——aem问题

执行aem指令出现一下问题 lxflxf:~/MYFile/apollo_v10.0 $aem enter permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Get "http://%2Fvar%2Frun%2Fdocker.sock/v1.49/containers/json?filters%7B%22name%22%…
阅读更多...
数字IC后端零基础入门基础理论（Day2）

数字IC后端零基础入门基础理论（Day2）

数字IC后端零基础入门基础理论&#xff08;Day1&#xff09; Placement Blockage: cell摆放阻挡层。它是用来引导工具做placement的一种物理约束或手段&#xff0c;目的是希望工具按照我们的要求来做标准单元的摆放。 它主要有三种类型&#xff0c;分别是hard placement bloc…
阅读更多...
如何远程执行脚本不留痕迹

如何远程执行脚本不留痕迹

通常我们在做远程维护的时候&#xff0c;会有这么一个需求&#xff0c;就是我想在远程主机执行一个脚本&#xff0c;但是这个脚本我又不想保留在远程主机上&#xff0c;那么有人就说了&#xff0c;那就复制过去再登录远程执行不就行了吗&#xff1f;嗯嗯&#xff0c;但是这还不…
阅读更多...
【Lua】java 调用redis执行 lua脚本

【Lua】java 调用redis执行 lua脚本

【Lua】java 调用redis执行 lua脚本 public Object executeLuaScript(String script, List<String> keys, Object... args) {// 注意: 这里 Long.class 是返回值类型, 一定要指定清楚 不然会报错return this.redisTemplate.execute(RedisScript.of(j脚本, Long.class), k…
阅读更多...
利用混合磁共振成像 - 显微镜纤维束成像技术描绘结构连接组|文献速递-深度学习医疗AI最新文献

利用混合磁共振成像 - 显微镜纤维束成像技术描绘结构连接组|文献速递-深度学习医疗AI最新文献

Title 题目 Imaging the structural connectome with hybrid MRI-microscopy tractography 利用混合磁共振成像 - 显微镜纤维束成像技术描绘结构连接组 01 文献速递介绍 通过多种模态绘制大脑结构能够增进我们对大脑功能、发育、衰老以及疾病的理解&#xff08;汉森等人&am…
阅读更多...
Shell脚本实践(修改文件，修改配置文件，执行jar包)

Shell脚本实践(修改文件，修改配置文件，执行jar包)

1、前言 需要编写一个shell脚本支持 1、修改.so文件名 2、修改配置文件 3、执行jar包 2、代码解析 2.1、修改.so文件名 so_file_dir="/opt/casb/xxx/lib" # 处理.so文件 cd "$so_file_dir" || { echo "错误: 无法进入目录 $so_file_dir"; exit …
阅读更多...
基于GPUGEEK 平台进行深度学习

基于GPUGEEK 平台进行深度学习

一、平台简介 GPUGEEK 是一个专注于提供 GPU 算力租赁服务的平台&#xff0c;在人工智能与深度学习领域为用户搭建起便捷的算力桥梁。它整合了丰富多样的 GPU 资源&#xff0c;涵盖 RTX - 4090、RTX - 3090、A100 - PCIE 等多种型号&#xff0c;满足不同用户在模型训练、数据处…
阅读更多...
Android Framework学习五：APP启动过程原理及速度优化

Android Framework学习五：APP启动过程原理及速度优化

文章目录 APP启动优化概述APP启动流程点击图片启动APP的过程启动触发Zygote 与应用进程创建Zygote进程的创建应用进程初始化 ApplicationActivity 启动与显示 优化启动时黑白屏现象可优化的阶段Application阶段相关优化 Activity阶段数据加载阶段 Framework学习系列文章 APP启动…
阅读更多...
Web 实时通信技术：WebSocket 与 Server-Sent Events (SSE) 深入解析

Web 实时通信技术：WebSocket 与 Server-Sent Events (SSE) 深入解析

一、WebSocket&#xff1a; &#xff08;一&#xff09;WebSocket 是什么&#xff1f; WebSocket 是一种网络通信协议&#xff0c;它提供了一种在单个 TCP 连接上进行全双工通信的方式。与传统的 HTTP 请求 - 响应模型不同&#xff0c;WebSocket 允许服务器和客户端在连接建立…
阅读更多...
最新文章

Copyright @ 2022~2023