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.pswp.cn/web/79913.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/79913.shtml
英文地址，請注明出處：http://en.pswp.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